Custom SVG markers won’t display in IE 11

by

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

More Related Contents:

  1. IE11 meta element Breaks SVG
  2. Support for “border-radius” in IE
  3. Inline block doesn’t work in internet explorer 7, 6
  4. How to detect IE11?
  5. X-UA-Compatible is set to IE=edge, but it still doesn’t stop Compatibility Mode
  6. IE9 blocks download of cross-origin web font
  7. Does Internet Explorer support pushState and replaceState?
  8. Google Maps API – Getting closest points to zipcode
  9. Why doesn’t Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?
  10. Can’t display PDF from HTTPS in IE 8 (on 64-bit Vista)
  11. Force IE8 Into IE7 Compatiblity Mode
  12. How to make a Google Maps semi-transparent PNG tile layer work in IE8?
  13. Will an iframe render in quirks mode?
  14. Make Adobe fonts work with CSS3 @font-face in IE9
  15. Does Internet Explorer 8 support HTML 5?
  16. Make IE cache the resources but always revalidate
  17. How to set IE11 Document mode to edge as default?
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. IE : Unable to download * from *. Unable to open this Internet site. The requested site is either unavailable or cannot be found
  20. How do I remove default markers?
  21. What heuristics do browsers use to cache resources not explicitly set to be cachable?
  22. text-overflow:ellipsis doesn’t work on IE
  23. How well does IE7/8 mode in IE9 compare to actually running IE7/8
  24. Does the windows 8 internet explorer 10 still have quirksmode?
  25. Google Maps Multiple markers with the exact same location Not working
  26. Force Internet Explorer to use a specific Java Runtime Environment install?
  27. Emulate IE7 for IE8 but not for IE9 using “X-UA-Compatible”
  28. Blurry / Corrupted Google Maps Controls
  29. VBA Internet Explorer wait for web page to load
  30. Google Maps API Multiple Markers with Infowindows

Leave a Comment