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

Question

Anyone with any ideas on what's causing this weird glitch with the google maps UI components, be really grateful to hear from you!

the map is created with:

        var options = {         zoom: <?php echo $this->zoom ?>,         center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),             mapTypeControl: false,             mapTypeId: google.maps.MapTypeId.ROADMAP                         };           var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

and the glitch is the same even with no markers.

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