Google Maps SVG Token Not Displaying in IE 11

Question

Google Maps SVG Token Not Displaying in IE 11

My SVG map marker disappears in IE11. This is visible in Chrome, Firefox, Safari, IE9 and 10, but not 11. I downloaded the JSfiddle of my current code. I can’t say that it’s me or a mistake with Google Maps.

I loaded the 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>

+42

javascript google-maps svg google-maps-api-3

creativename Dec 6 '13 at 1:40

source share

7 answers

Johan B · Answer 1 · 2016-11-23 17:03

Adding scaledSize to the image / icon and optimized: false to the marker enabled 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 });

Nick F · Answer 2 · 2014-10-28 12:31

It seems Google Maps does not currently support the use of SVG for marker images. You may have vector marker icons, but using the Symbol object.

See my answer to this question for more details.

Anto Jurković · Answer 3 · 2013-12-06 08:57

I am not sure if this would help:

It is also advisable to define the width the map area. For example:

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

IE10 was the only one complaining that in the beginning

there is no following line:

 <!DOCTYPE html>

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

Did not help. Running code (using the DOCTYPE line) in BrowserStack. I got a message in the console:

 InvalidStateError (line 39)

And this line is not from a script, because if I change / delete something, then the message will be the same.

Eyal · Answer 4 · 2014-02-25 13:30

They say they fixed it here: https://connect.microsoft.com/IE/feedback/details/793569/ie-11-does-not-display-google-map-markers ... I just checked on my machine with 8.1 and does not work.

I have not tested it yet, but maybe this guy found out: http://powerhut.co.uk/googlemaps/custom_markers.php

JSqueen · Answer 5 · 2014-06-03 12:30

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

viviansteller · Answer 6 · 2018-12-07 11:09

scaledSize + optimized: false did the trick.

The scaled size should be the actual size of the image / icon sprite.

Dirk · Answer 7 · 2019-07-04 15:41

I had a very similar problem for the project, but I was in a situation where I could not edit GM-JavaScript.

So here is the CSS approach I would like to share:

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

In this case, only those img elements are selected that have an src attribute value ending in " .svg " inside your GM integration and force them to use a width and height of 48 pixels .

I usually try to avoid these important tags! - but in this case it was necessary because it has to override some inline styles that define the width and height of 0px in IE11.

Google Maps SVG Token Not Displaying in IE 11

More articles: