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

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