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

Solution 1:

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...

Solution 2:

With latest version of google maps api you need this:

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>