Google Maps SVG marker doesn't display on IE 11

Question

My SVG map marker disappears on IE11. It's visible in Chrome, Firefox, Safari, IE9 & 10, but not 11. I've uploaded a JSfiddle of my current code. I can't tell if this is me or a bug with Google Maps.

I've uploaded a JSfiddle of my current code

<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyfFUUVxVyoCicnttJfj-w63wzfbTKV3Y&sensor=false">
    </script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script>

function initialize() {

  var sanfrancisco = new google.maps.LatLng(37.78062,-122.397203);

  var mapOptions = {
    zoom: 18,
    zIndex:0,
    center: sanfrancisco,
    mapTypeControl: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    },zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // var image = 'img/1p_marker3.png';
  var image = 'http://firstperson.is/assets/img/contact/map_marker.svg';

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

  var roadAtlasStyles = [
    {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#003a70" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#0075c9" }
    ]
  },{
    "featureType": "administrative.land_parcel",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "elementType": "labels.text.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#0075c9" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      { "color": "#0075c9" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "color": "#d0343a" }
    ]
  },{
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      { "color": "#ff4539" }
    ]
  },{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      { "color": "#0075c9" }
    ]
  },{
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      { "invert_lightness": true },
      { "hue": "#0077ff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      { "visibility": "on" },
      {"color":"#ffffff"}
    ]
  },{
    "featureType": "poi.park",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.sports_complex",
    "elementType": "labels.text.fill",
    "stylers": [
      { "visibility": "on" },
      {"color":"#ffffff"}
    ]
  },{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.province",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "weight": 0.9 }
    ]
  }
  ];


  var styledMapOptions = {
    name: 'US Road Atlas'
  };

  var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles, styledMapOptions);

  map.mapTypes.set('usroadatlas', usRoadMapType);
  map.setMapTypeId('usroadatlas');

  // var transitLayer = new google.maps.TransitLayer();
  // transitLayer.setMap(map);
};

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Your server is returning the .svg file with the content-type "text/html". Is this intended ? Chrome isn't showing your icon. — Fer To, Apr 30 '15 at 13:43
I'm no longer hosting the svg image file at all. I went with a png since Google Maps seems to not support SVGs for marker images. — creativename, Jun 24 '15 at 18:35
I've tested a working solution here: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 — Mike Kormendy, Sep 21 '16 at 22:35

Johan B · Answer 1 · 2016-12-06T08:51:55.837

106

Adding scaledSize to the image/icon and optimized: false to the marker solved it for me.

http://jsfiddle.net/kQRbr/31/

var image = {
    url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
    scaledSize: new google.maps.Size(100, 100),
}

var marker = new google.maps.Marker({
    position: sanfrancisco,
    map: map,
    optimized: false,
    icon: image
});

edited Dec 06 '16 at 08:51

answered Nov 23 '16 at 17:03

Johan B

1,976
1
21
40

fantastic, for me those 2 settings works like a charme in IE11 – InforMedic Jan 24 '17 at 17:03
@Johan B Is there like any piece of doc where you've found it or is it standard IE bug solving procedure (just gambling and pure luck and by changing random properties)? – entio Mar 13 '17 at 10:32
1

For us, just setting optimized to false did the trick as long as the SVGs had the correct default size inside the files themselves. – Chris Rae Apr 25 '17 at 18:55
Works like a charm! – Kabachok Jul 13 '17 at 08:58
Thanks - it works for me too! Still I don't understand why this such basic feature hasn't been already fixed by MS. That pretty sad. – Jan Kadeřábek Aug 14 '17 at 15:38
I was unable to get my custom icon to print in Safari 10.0.1, the optimized:false option solved this. Thank you! – EoghanTadhg Aug 19 '17 at 21:25
Thanks, it is also working with IE11 when it shows the images but was craching the map when you wanted to use it (zoom). – TytooF Oct 18 '17 at 08:28
This works but can anyone elaborate on why? what does `optimized:false` even do? and Should we check user agents and only disable that selectively so "good" browsers don't suffer? – deweydb Nov 18 '17 at 19:35
1up, you made my day! I used initially "size" that worked since I renamed the SVG marker icons. Then all of a sudden not anymore on Chrome/FF on PC (while it still worked on Safari PC and mobile Chrome/FF). scaledSize was the solution! – Jonny Jun 24 '18 at 11:26

score 5 · Answer 2 · edited May 23 '17 at 11:47

5

It seems Google Maps currently doesn't support using SVGs for marker images. You can have vector marker icons though, by using a Symbol object.

For more details, see my answer to this question.

edited May 23 '17 at 11:47

Community

1
1

answered Oct 28 '14 at 12:31

Nick F

9,781
7
75
90

4

@MikeKormendy Firstly, this was definitely true in Oct 2014 when I wrote this. Secondly (see my answer linked above), while SVG markers did *happen to work* in some browsers, they weren't officially supported and didn't work in all browsers - you had to use a Symbol for vector icons to work in all browsers. Nothing I can see in the docs suggests that's changed, but if you're sure that Google Maps does now support SVG markers (including in IE11?), a link to support that and provide an update to the above would be more useful than a simple assertion. "Downvote" comes across as pretty rude, too. – Nick F Sep 23 '16 at 00:21
1

Not getting personal nor going to argue here. Just stating why I downvoted - which ultimately helps users see which answers are relevant (or not in this case) based on vote numbers. I have already provided a link to examples in the OPs comments, and instead of duplicating the answer from there in this thread, I simply provided the link in comments (which is the policy on SO) – Mike Kormendy Sep 24 '16 at 13:36

Dirk · Answer 3 · 2019-07-04T15:47:01.013

I had a very similar issue for a project, but I was in a situation where I couldn't edit the GM javascript.

So, here is a CSS approach I'd like to share:

#someGoogleMapsWrapperHere .gm-style img[src$='.svg'] {
    width: 48px !important;
    height: 48px !important;
}

This only selects img elements which have a src attribute value that ends with '.svg' inside your GM integration and forces them to use the width and height of 48px.

I usually try to avoid those !important tags - but in this case it was mandatory, because it has to overrule some inline styles that define a width and height of 0px in IE11.

Anto Jurković · Answer 4 · 2013-12-06T10:34:36.860

1

I am not sure if this would help:

It is wise to define also width of map area. For example:

#map-canvas { height: 100%; width: 100%; }

IE10 was the only one complaining that there is no the following line at beginning

<!DOCTYPE html>

One comment: marker is huge keeping the same size when you zoom out.

Didn't help. Running code (with DOCTYPE line) at BrowserStack I got message in console:

InvalidStateError (line 39)

And this line is not from the script because if I change/delete something the message is the same.

edited Dec 06 '13 at 10:34

answered Dec 06 '13 at 08:57

Anto Jurković

11,188
2
29
42

Thanks. I reset the width, because it is good practice. The doctype exists on the jsfiddle, I just didn't grab it for the code paste on accident. The weird thing is that everything functions fine visually except for the map marker on IE 11. I know that SVG is supported, but I'm not sure if it's a setting in my SVG image file saving from Adobe Illustrator, or if it's a bug. – creativename Dec 06 '13 at 19:05
It seems that SVG image is ok. You can put SVG code of image in separate html file and it renders without problems. I do not know if dimensions of this SVG image could be problem. – Anto Jurković Dec 06 '13 at 19:41
2

I swapped the SVG out with a png to make sure it was the SVG that wasn't being read & now the icon is visible as far as I've tested. I didn't change any of the other code. – creativename Dec 11 '13 at 02:24

score 1 · Answer 5 · answered Jun 03 '14 at 12:30

1

I had the same problem because my ActiveX-filter was checked. Uncheck (properties - safety - activeX filter), then you can see your markers again. The error occured because I am using geoxml3.

answered Jun 03 '14 at 12:30

JSqueen

11
1

3

I was testing in a VM environment. I wouldn't want to rely on a user having deactivate setting to get it working properly. – creativename Jul 17 '14 at 23:01

Google Maps SVG marker doesn't display on IE 11

5 Answers5

Linked