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

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

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

Answer 3

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?

Answer 4

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 5

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>

Answer 6

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 7

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.

Answer 8

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>