Google Maps marker cut in half internet explorer

Question

I'm having a weird problem with my google maps marker icons in internet explorer. All my markers are showing up cut in half doubled and shifted over 50 %.

that is using the demo code from google. So it must be something weird i'm doing elsewhere with styles or jquery, but i don't know what. Has anyone had this problem before?

Answer 1

I had the same problem; I had to set both the margin and the padding to 0:

#map img {
    margin:0px;
    padding:0px;
}

Answer 2

I fixed this problem by using a stable version of the api like...

http://maps.google.com/maps/api/js?v=3.2&sensor=false

instead of the nightly dev build...(http://maps.google.com/maps/api/js?sensor=false)

Answer 3

Your problem is interesting, in that it was happening with the default markers as well. I described a similar issue for custom markers in a blog post on Feb 2012: http://www.gutensite.com/Google-Maps-Custom-Markers-Cut-Off-By-Canvas-Tiles

We were having problems with Google Maps API Version 3.8 (newer than several others who proposed solutions here). The custom markers would be cut off, while the default markers were not. We discovered that this was caused by the new Canvas tiles that are used to optimize how Google Maps display. If you inspect elements, you can see that the markers are actually tile layers.

If we turned off 'optimized' (see code below) the markers displayed correctly! So it appears to be related to the optimization code.

var point = new google.maps.Marker({
'position': position,
'map': this.options.map.construct,  
'icon': marker_data.custom_icon,    
'title': marker_data.title, 
'optimized': false
});

I have not confirmed whether this issue has been fixed by Google since then or not, or if there is a better solution.

Others have suggested that if you parseInt() the markers' width and height, it solved their problem.

See linked article for pictures. Stackoverflow won't let me include them because I don't have enough reputation points :-\

Answer 4

I had similar problem, (i used custom marker images, and they were shifted by 1px left and bottom in IE7-8)

This code solved the problem:

<!--[if IE]>
  <style>
    div#map img{
      margin-top: -1px;
      margin-left: -1px;
    }
  </style>
<![endif]-->

Where map is the id of the google map api container div.

Answer 5

I tried the #map_canvas img { margin: 0px; } solution above, but it only half worked. I changed it to #map_canvas img { margin: -5px; } and applied to the IE7 & IE8 stylesheet.

Answer 6

parseInt around the values made it for me

new google.maps.Size(parseInt(width), parseInt(height))
new google.maps.Point(parseInt(width)/2, parseInt(height))