7

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.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Harris
  • 81
  • 1
  • 4
  • You should add some proof-of-concept code to your question, not just link to a website. – duncan Nov 01 '13 at 09:14
  • Could the possible working solution be here: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 – Mike Kormendy Sep 21 '16 at 22:31

4 Answers4

6

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)

Community
  • 1
  • 1
Nick F
  • 9,781
  • 7
  • 75
  • 90
  • this is all very good, but how do I create this object notation (goldStar) for a svg file containing multiple paths with different colors. How do I combine them in this notation. – Probosckie Oct 08 '15 at 07:18
  • 2
    That's a separate question really! Though according to [this answer](http://stackoverflow.com/a/26321678/180500) icons have to be a single path, so it might not be possible. – Nick F Oct 08 '15 at 11:11
  • This only works for simple one color shape icons. Complex layered SVG icons have issues that may be resolved here: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 – Mike Kormendy Sep 21 '16 at 22:33
5

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

Community
  • 1
  • 1
-1

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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
-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">

mysticmo
  • 47
  • 3