Google Maps marker is disabled in half of the Internet browser

Question

I am having a weird issue with my Google Maps marker icons in Internet Explorer. All of my markers show a halving and a 50% shift.

which uses the demo code from google. So it must be something strange, I do styles or jquery elsewhere, but I don't know what. Has anyone had this problem before?

Answer 1

I had a similar problem. The problem is that each marker icon inherited margin> 0, I solved the problem by setting the margin to zero for all img on the div map.

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

Answer 2

Your problem is interesting in that this happened with the default markers. I described a similar issue for custom tokens on a blog in February 2012: http://www.gutensite.com/Google-Maps-Custom-Markers-Cut-Off-By-Canvas-Tiles

We had problems with the Google Maps API version 3.8 (newer than a few others that offered solutions here). Custom markers will be disabled, but the default markers will not. We found that this was caused by new canvas tiles, which are used to optimize the display of Google Maps. If you check the elements, you can see that the markers are actually tile layers.

If we disabled "optimized" (see code below), then the markers displayed correctly! So it seems 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 or not, or if there is a better solution.

Others suggested that if you parseInt () the width and height of the markers, they solved their problem.

See related article for photos. Stackoverflow will not allow me to include them because I do not have enough reputation points: - \

Answer 3

I fixed this problem using a stable api version like ...

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

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

Answer 4

I had a similar problem (I used custom marker images and they were shifted 1px to the 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 container identifier of the google map api div.

Answer 5

I had the same problem; I needed to set both the field and the indentation to 0:

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

Answer 6

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

Answer 7

parseInt around values ​​made for me

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