Google Map Markers Distorted with Bootstrap

This post is more than 18 months old. Since technology changes to rapidly, this content may be out of date (but that's not always the case). Please remember to verify any technical or programming information with the current release.

On a recent project, the dev team installed Twitter Bootstrap as the base for our CSS. For some reason, I was the only one seeing a problem with Google Maps. Their Windows and Mac browsers of both Chrome and Firefox were displaying the marker fine. (Part of me doesn’t believe that entirely but….). At any rate, my Chrome browser on ubuntu was not showing the marker properly. This is what it looked like:

before

I finally tracked down that it was some default styles in Bootstrap that were causing the issue. I added this rule to our css:

#googlemap img[src^="http://maps.gstatic.com/"] {
  max-width: none;
}

And, we were good to go. Proof:

after

css

Return to All Posts

or use RSS