Custom SVG Tokens Will Not Display in IE 11

Question

I am trying to display some bus routes using the Google Data Layer , and then add some custom icons. Works great in Chrome and Firefox, but in IE 11 I only get routes. I get an InvalidStateError somewhere deep in some confusing code.

markers use uri data with some built-in SVG, which translates to base 64 lines. I also tried NOT to convert to base 64; which does not generate any visible errors, but markers are still not displayed.

Simplified javascript is inserted below and you can see it in action on jsfiddle .

var map; map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 11, center: {lat: 38.813605, lng: -89.957399} }); var geoJsonRoutesUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Routes.json'; var routesLayer = new google.maps.Data(); routesLayer.loadGeoJson(geoJsonRoutesUrl); routesLayer.setMap(map); routesLayer.setStyle(function(feature) { return ({ strokeColor: feature.getProperty('color'), fillColor: feature.getProperty('color'), strokeWeight: 6 }); }); var geoJsonRouteMarkersUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Route-Markers.json'; var routeMarkersLayer = new google.maps.Data(); routeMarkersLayer.loadGeoJson(geoJsonRouteMarkersUrl); routeMarkersLayer.setMap(map); routeMarkersLayer.setStyle(function(feature) { var markerIcon = CreateRouteMarkersIconDefinition( feature.getProperty('route'), feature.getProperty('color'), feature.getProperty('backColor')); return ({icon: markerIcon}); }); function CreateRouteMarkersIconDefinition(route, color, backColor) { var svgHtml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30">'; svgHtml += '<ellipse cx="15" cy="15" r="15" rx="15" ry="10" fill="' + backColor + '" />'; svgHtml += '<text x="15" y="20" style="text-anchor: middle;" font-family="Verdana" font-size="12px" font-weight = "bold" fill="' + color + '" >' + route + '</text>'; svgHtml += '</svg>'; var svgIcon = { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgHtml), anchor: new google.maps.Point(15, 15) }; return svgIcon; } 

Answer 1

I had a similar problem, and in the end I found that you can receive SVG images and SVG URI data, but for SVG some parameters are required that are not required for other types of images. In particular, after I resized and scaled the Size parameters to define the icon (along with the uri, origin and anchor values), the error disappeared and the marker was displayed. My sample marker looks like this (with svg, which has already been defined as SVG, which I want as a marker):

 var bubbleImage = { url: 'data:image/svg+xml;base64,' + Base64.encode(svg), size: new google.maps.Size(192, 21), scaledSize: new google.maps.Size(192,21), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(88, 53) }; var bubbleMarker = new google.maps.Marker({ position: feature.position, icon: bubbleImage, map: window.map, optimized: false, zIndex: 1 }); 

Answer 2

This MDN (Mozilla Developer Network) link states that "Internet Explorer 8 and above only supports URI data for images in CSS, and." I think this is simply not supported in IE. What are other news?

Answer 3

OK! I did this on my network, I used it in my angularJS project, I shared it with jQuery. I try two ways to create a custom Google map marker, this startup code uses canvg.js, which is better browser compatibility. Comment code is not currently supported by IE11 ("scaledSize" and "optimized: false" together seem to be complicated).

 var marker; var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = { latitude: 59.327, longitude: 18.067, color: "#" + "000", text: "ha" }; marker = createMarker(markerOption); marker.setMap(map); marker.addListener('click', changeColorAndText); }; function changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape has problem var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } }); return markerObj; }; function createSvgIcon(color, text) { var div = $("<div></div>"); var svg = $( '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' + '</svg>' ); div.append(svg); var dd = $("<canvas height='50px' width='50px'></cancas>"); var svgHtml = div[0].innerHTML; canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize //var svg = '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' // + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' // + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' // + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' // + '</svg>'; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { size: new google.maps.Size(32, 43), url: imgSrc, scaledSize: new google.maps.Size(32, 43) }; return iconObj; }; 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Your Custom Marker </title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script src="https://canvg.imtqy.com/canvg/canvg.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> </body> </html>