Frisch notiert!
Die neusten Artikel aus unserem Blog.

Quick Fix: Google Maps API – meine Steuerelemente werden nicht richtig dargestellt! Was tun?

von Adrian Lambertz / Zuletzt aktualisiert am 18/08/2016 / Webdesign / 0

Es kommt bei der täglichen Arbeit regelmäßig vor, dass ich eine Google Map per Javascript API einbinden muss. So weit so gut, alles kein Problem.

Wer wie ich auf das Bootstrap oder Foundation Framework (oder andere) setzt, wird selber bestimmt schonmal gemerkt haben, dass die Steuerelemente der Google Map nicht korrekt dargestellt werden.

maps-kaputt

 

Wer jetzt zum allerersten mal drauf stößt und bei seiner Google Recherche nach einem Fix auf den Beitrag gestoßen ist – hier ist er. Bitteschön:

#map img {max-width: none;}

#map ist natürlich die ID von eurem Container, der die Google Map enthält. Diesen könnt ihr natürlich nach belieben ändern.

Sobald man diesen Fix ins CSS einträgt, sieht das ganze dann wieder so aus:

Bildschirmfoto 2015-04-07 um 17.16.27

Ahh… sehr schön. Aber woher kommt der Fehler?

Bootstrap, Foundation (und sicherlich auch andere Frameworks) setzen eine max-width von 100% auf Bilder. Und das mögen die Assets der Google Map nicht wirklich. Daher lösen wir diese CSS Anweisung der Frameworks einfach auf.

Das wars schon!


Adrian Lambertz

Seit 2010 bin ich nun schon bei Pixelbar mit dabei. Zuerst als Auszubildender und nach erfolgreichem Abschluss meiner Ausbildung als Frontend-Entwickler.

Ohne Musik und Kaffee kann ich nicht leben, daher konsumiere ich beides während der Arbeit praktisch durchgehend :).

Daneben liebe ich WordPress – darauf habe ich mich spezialisiert.

Weitere Beiträge von adrian anzeigen

Hinterlasse eine Antwort