New Google Maps Symbol object in Marker makes IE really slow

Question

I'm testing the new Symbols object of the Google Maps V3 API. I have set every "icon" attribute of 400 markers with the same Symbol path and color.

When look at the sample page with Firefox or Chrome, everything loads fast and works great.

Unfortunately... the performance in Internet Explorer are really bad. Bad at loading time and also when I try to drag or zoom on the map.

Here is a simple javascript example which you can use to test on IE

  var map;
  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

  }

  function addMarkers() {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 400; i++) {
      var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                          southWest.lng() + lngSpan * Math.random());
      var marker = new google.maps.Marker({
        position: latLng,
        icon:{  
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 4
         },
       map: map
      });
    }
  }

When you use it with some extra attributes and events it gets worst! But if you just delete the "icon" attribute of the marker, the basic Google marker appear and everything goes as fast as Chrome and Firefox...

Does anybody have an answer why this is that slow on IE when using Symbol and how can I speed up the process.

Thanks!

Answer 1

The symbol icons on Google Maps are part of the new VectorIcons. These are no bitmaps, but are described as vector paths in SVG format. These are basically paths with a lot of points that get drawn until the shape is completed.

Now you have a lot of icons, which means a lot of SVG paths that have to be drawn. When you see different rendering speeds in different browsers, you are basically comparing the SVG rendering engines of the browsers - and from your application it looks like IE9 is slower than the other browsers.

I don't think there is a method to speed this up. You could either reduce the number of shown markers (for example with clustering) until you get to an acceptable rendering speed. Or you could simply use the Bitmap icons.