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?

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?

• javascript
• google-maps
• google-maps-api-3
• svg

• I use a lot of svg polygon markers, however I call them from an svg file. I can't recall if there was a performance improvement vs path. It's worth a try to test polygon files vs paths – Francis Hemsher Commented Feb 14, 2014 at 16:23
• optimized is set to true by default and I can't tell why (in which case) you would set it to false; maybe @geocodezip could be of some help? I am not surprised to read that "Chrome handles it fine but IE9 does not" but a live example of the issue and/or some details about the performance issues that you noticed would be a plus. Good question btw. – MrUpsidown Commented Feb 14, 2014 at 20:16
• Do you know how is icon like that presented in DOM? I can see for each marker one canvas element like <canvas width="14" height="13" draggable="false" style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none;"></canvas> and one transparent.png image. – Anto Jurković Commented Feb 14, 2014 at 22:24
• 7 Maybe try using a data uri? icon: 'data:image/svg+xml;utf8,<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3/2000/svg" version="1.1"> <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" /> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> </svg>'); – Steve Jansen Commented Feb 15, 2014 at 20:42
• 2 @Phil_1984_ The main reason for using SVG (in my case) is because you can then programatically generate the icon (colors, shapes, etc). Sometimes you need a degree of flexibility that makes it impossible to pre-generate image files. – Knut Marius Commented Dec 22, 2014 at 8:30

2 Answers 2

How plicated 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.

According to my experience you can use this script and it works perfectly:

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
      },
      draggable: true,
      map: map
    });

Also if you could want to use SVG file from css. it can be used as follows:

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: 'M22-48h-44v43h16l6 5 6-5h16z',
        fillColor: '#6331AE',
        fillOpacity: 1,
        strokeColor: '',
        strokeWeight: 0
      },
    map_icon_label: '<span class="class_name1 class_name2"></span>', 
  draggable: true,
  map: map
});

Then you can add the CSS values in class_name1 and class_name2 to bring the svg image in side the square. If you want to change the background of the marker into some mon ways, I have shared below some mon marker paths:

    MAP PIN = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
    SQUARE PIN = 'M22-48h-44v43h16l6 5 6-5h16z';
    SHIELD = 'M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z';
    ROUTE = 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z';
    SQUARE = 'M-24-48h48v48h-48z';
   SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z';

Hope it helps you.