Google Maps SVG image marker icons not showing in IE11

Question

There is an issue on a site I have been working on that for some reason the SVG image markers are not showing up in IE 11.

I have two sets of markers:

• the default zoomed out has PNG markers for the suburbs
• zoomed in has address specific numbered SVG ones

I use a fallback for older browsers that don't support SVG (testing it with modernizr). I am using the old Google Chart markers for IE 11 to get it to work (testing the user agent string to id it).

I want to know if anyone has an idea as to:

• the cause

• whether it is something screwed up with IE11 Edge mode (switch the document mode to 10 to get it to work)

• or something that is failing with Google.

The site is:

http://artstrail.org.au/arts-trail.php

You can see it fail if you change the user agent string in IE 11 while leaving it in Edge Document mode.

Answer 1

It seems that Google Maps doesn't really support using SVG images for markers at the moment. This fact is easy to overlook, because it turns out that SVG marker images do actually work in, eg. Chrome and Opera.

However, the Google Maps API (v3) specifically provides Symbol objects for displaying vector paths in map markers. I found that specifying the vector image in SVG path notation allowed it to work in IE and other browsers.

Example (from Google Maps docs, here):

var goldStar = {
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  fillColor: 'yellow',
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: 'gold',
  strokeWeight: 14
};

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: goldStar,
  map: map
});

(Thanks to this answer too)