Bootstrap verzerrt Google Maps Controls / UI Elemente

In Verbindung mit Bootstrap wollte ich in eine Website Google Maps mit einem API Key integrieren. Darauf sah ich,… erstmal kaum etwas. Das Overlay meiner Karte blieb einfach nur grau und die UI Elemente waren verzerrt / verschwommen / unscharf.

map-distorted

Das Problem dabei besteht darin, dass Bootstrap die max-width von Bildern auf 100% setzt.
Ich löste dieses Problem, indem ich den Map Wrapper, in dem ich mein Kartenmaterial angezeigt bekomme wiefolgt setze:

#map {
max-width: none;
}

Das Ergebnis war dann genau so, wie ich es ursprünglich wollte.

map-sharp

Leave a Comment.


*