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)

Answer 2

Actually, for me adding marker optimized: false and icon scaledSize: new google.maps.Size(25, 25) does it for me. So even if what Nick F says is true (that it's not officially supported), it works.

SVG markers start showing up in IE11. It seems that the scaledSize adds a style width and height on the <img> element, unsure what optimized does in this case.

Example:

        var marker = new google.maps.Marker({
            map: map,
            position: poi.geometry.location,
            title: poi.name,
            zIndex: 99,
            optimized: false,
            icon: {
                url: 'loremipsum.svg',
                scaledSize: new google.maps.Size(25, 25),
                size: new google.maps.Size(25, 25),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12.5, 12.5)
            }
        });

Credit: Google Maps SVG marker doesn't display on IE 11

Answer 3

The IE implementation deviates from the SVG standard in the following ways:

Properties of a marker element inherit at the point of reference, not from the ancestors of the marker element.

References

MS-SVG: The 'marker' element

Answer 4

Add meta to emulate IE10/IE9 if the SVG supports in lower IE versions.

ie) for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">