IE9 and below starts to slow down and hang when adding lots of google map markers via Symbol (SVG path)

Question

Google maps api let's you specify a custom marker icon in the form of an SVG path. On my fast machine, displaying 500 of these markers (SVG paths) on IE9 or less causes the browser to come to a slow crawl and hang. Everything works fine in Chrome, FF, Opera, and Safari, and IE10 at those higher numbers, but not IE9 and below.

Looking for a way to speed it up IE.

jsfiddle example

// this will cripple IE 9 and below
for (var i = 0; i < 500; i++)
{
    new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(locations[i].LATITUDE, locations[i].LONGITUDE),
        icon: {
            path: 'M 5, 5 m -3.75, 0 a 3.75,3.75 0 1,0 7.5,0 a 3.75,3.75 0 1,0 -7.5,0', //a small circle
            fillColor: 'red',
            fillOpacity: 1,
            strokeColor: 'blue'
        }
    });
}

Answer 1

Okay I've found a way to load all the symbols in IE9 and below without it hanging, but it's not all at once like the other browsers. Basically, you have to throttle the addition of the markers to the map using setTimout. This allows the IE9 and below browsers to continue working with user interaction while it proceeds to load all the remaining images. If you attempt to load too many too fast without giving the browser a rest, it will start to get choppy in its rendering and appear to be hanging.

Important note: it seems that the rendering rate keeps getting slower the more choppy it gets and especially when it hangs although I didn't verify this. Personally, I like one at a time as it shows the user it's still laoding markers.

updated fiddle that shows the improvement with throttling.

javascript that I ended up using:
I didn't render them in blocks below like I did in the fiddle as it seems to work best (for me) processing them one at a time with a short 200ms interval.

if (ie >= 7 && ie <= 9)
{
    $.each(arrMarkers, function (index, marker)
    {
        // throttle the addition of markers to the map
        setTimeout(function ()
        {
            marker.setMap(map);
        }, index * 200);
    });
}

var ie = (function ()
{
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;
} ());