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

Answer 1

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

Answer 2

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

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