Optimizing SVG markers in Google Maps

Question

Are there good ways to optimize how Google Maps API v3 draw markers to the HTML document when using SVG symbols for the icons? Here is an example of a marker using SVG symbols:

  var star = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow'
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: star,
    map: map,
    optimized: true //Does not seem to do anything..
  });

Google has this property called "optimized" that can be set on markers, and when using for instance PNG icons instead of SVG drawings this works fine: Google creates one single canvas per tile instead of one img per icon, which is obviously scaling much better.

The "optimized" property does however not seem to do anything when using SVG markers: They always seems to be drawn in one single canvas per marker. When I have many markers, certain browsers start having performance issues. Chrome usually handles it fine, but IE9 for instance, does not handle many markers before showing significant performance issues. Clustering is not an option in this case.

Does anyone know any good ways of optimizing this, so that the browsers can handle more SVG markers at the same time?

Answer 1

How complicated are the SVG icons you are generating? Because you could also draw the icon on a canvas object yourself and use the toDataURL method to generate a data-uri for use in Google Maps. This would actually generate a bitmap image so that might work in IE9 (at least the method is supported).

You can also draw a SVG on a canvas but there are some caveats if you want to programatically alter them. And IE9 will probably not cooperate so I am not sure if that's the way to go.