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

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.

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

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>

Looks like a problem with the zoom control. Try adding zoomControl:false to your options.

In fact it seems the normal zoom slider is positioned off to the left of the page (use Firebug > Inspect Element). Could be a CSS conflict?

Well I got the fix for this:

On your CSS you added something like:

img {max-width: 100%; height: auto;}

try not to make it global and it should fix you :)

This worked for me:

#map img { max-width: none !important; } (from Patrick's answer)

the attribute "!important" makes sure to override any other style, #map is the id assigned when you declare the new object Gmaps:

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

if you are using the Dreamweaver fluid grid feature your default set up should look like this:

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

Try this:

object, embed, video {
	max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

just replace the code as it is.

Bootstrap (as of version 2.3.2) messes with images in the same way as in the accepted answer.

In fact, I suspect that the design used in Haroldo's website uses Bootstrap.

I'm just posting this because no one else mentioned Bootstrap, and someone might be looking for a Bootstrap-specific solution.

I ran into this problem on my Square Space website. I did not have access to the CSS style sheet. Since you are embedding an html doc, you can just use inline CSS to fix the problem. I modified the style of the container instead of making a site wide change (which I couldn't do). Here is what I did:

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>