Google Maps API V3 : weird UI display glitches (with screenshot)

We ran into the same problem. The css designer was using this style:

style.css

img {max-width: 100%; }

Instead of disabling the zoom control, we fixed the problem by overriding the img style for map_canvas elements like so:

style.css:

#map_canvas img { max-width: none; }

The zoom control now displays correctly.

Setting “img max-width:100%” is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/ Not sure why this conflicts with the google map…

Leave a Comment