Google Maps API V3 : weird UI display glitches (wi

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

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>

Answer 2

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 :)

Answer 3

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

Answer 4

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>

Answer 5

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.

Answer 6

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>