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 a similar issue. The problem being that each marker icon inherited a margin>0, I solved the issue by setting the margin to zero for all img in the map div.

<style type="text/css">
   #map_canvas img {
       margin: 0px
   }
</style>

Answer 2

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 3

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