Custom SVG markers won't display in IE 11

Question

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

the markers use a data uri with some inline SVG that is converted to base 64 strings. I've also tried NOT converting to base 64; that doesn't generate any apparent errors, but the markers still don't display.

Simplified javascript is pasted below, and you can see it in action at 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 eventually found that you can get SVG and data URI SVG images working, but some parameters that aren't required for other image types are required for SVG. Specifically, once I size and scaledSize parameters on the definition for the icon (along with uri, origin and anchor values), the error went away and the marker rendered. My sample marker is as follows (with svg having already been defined to be the SVG I want as the 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 reference in MDN (Mozilla Developer Network) states that "Internet Explorer 8 and above only supports data URIs for images in CSS, , and ". I guess this just isn't supported in IE. What else is new?