Marker’s new Symbian Google Maps feature makes IE very slow

Question

I am testing a new Google Maps V3 Symbols API object. I set each “icon” attribute of 400 markers with the same symbol and color.

When you browse a page with Firefox or Chrome, everything loads quickly and works great.

Unfortunately ... Internet Explorer performance is very poor. Bad during loading, and also when I try to drag or zoom the map.

Here is a simple javascript example that you can use for testing in 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 additional attributes and events, it gets worse! But if you just remove the marker icon attribute, the main Google marker will appear, and everything will be as fast as Chrome and Firefox ...

Does anyone have an answer why this is so slow in IE when using Symbol and how to speed up the process.

Thanks!

Answer 1

Google Maps symbol icons are part of the new VectorIcons . These are not bitmaps, but are described as vector paths in SVG format. These are basically paths with a lot of dots that are drawn until the shape is complete.

You now have many icons, which means many SVG paths to draw. When you see different rendering speeds in different browsers, you basically compare SVG rendering mechanisms in browsers - and from your application it looks like IE9 is slower than other browsers.

I don’t think there is a way to speed this up. You can either reduce the number of markers shown (for example, with clustering) until you reach an acceptable rendering speed. Or you can just use the Bitmap icons.