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.

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:

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!