Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


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.

I was testing in a VM environment. I wouldn't want to rely on a user having deactivate setting to get it working properly.

Note
Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


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
});

@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)?

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

For us, just setting optimized to false did the trick as long as the SVGs had the correct default size inside the files themselves.

fantastic, for me those 2 settings works like a charme in IE11

Note
Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


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.

Note
Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


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

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.

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)

Note
Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


A comment in your first link suggested adding '<meta http-equiv="X-UA-Compatible" content="IE=Edge">' to the page head to force compatibility mode. Seems to have done the trick for the issues I've been having.

Note
Rectangle 27 0

javascript Google Maps SVG marker doesn't display on IE 11?


#map-canvas { height: 100%; width: 100%; }
<!DOCTYPE html>
InvalidStateError (line 39)
width

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

I am not sure if this would help:

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.

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

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.

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

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.

Note