Google Maps V3 Custom Markers Not Displaying In IE

Question

I was about to post this, then I figured it out. But I'll post it anyway for anyone else who needs it. The lesson learned is to use .ico files for custom marker images if you want them to work in IE. (As a side note, it's still not working right in Safari, but that is another issue.)

---

I've had an issue for a while now where Google Maps API V3 markers created using custom images do not display in IE or Safari. It works fine in every other browser I've tested, but most of our user base is still on IE so I need to get this fixed.

This is apparently a known issue (at least to Google), as indicated in this Google support thread: http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en

I'm wondering if anyone else has run into this issue or knows of a workaround for it?

Here's the js from a simple test page I created, which demonstrates this bug:

var map;
var latLng = new google.maps.LatLng(41.342, -84.932);

$(function() {
    var myOptions = {
        zoom: 17,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var newMarker = new google.maps.Marker({
        map: map,
        position: latLng,
        icon: 'images/active_point.png'
    });
});

---

The fix: I converted the image to active_point.ico and that worked just fine for IE. For some reason IE doesn't like my .png.

---

After some more research it appears that Safari must be handled as a special case because it does not seem to work with .ico OR .png marker images. I've only gotten .jpgs to work, which is annoying because they don't support an alpha channel.

Answer 1

add metatag

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

& this code to Google Api code

//google map custom marker icon - .png fallback for IE
var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;

var marker_url = (is_internetExplorer11) ? 'IE-map-icon-location.png' : 'map-icon-location.png ';