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

google maps api let's specify custom marker icon in form of svg path. on fast machine, displaying 500 of these markers (svg paths) on ie9 or less causes browser come slow crawl , hang. works fine in chrome, ff, opera, , safari, , ie10 @ higher numbers, not ie9 , below.

looking way speed ie.

jsfiddle example

// cripple ie 9 , below (var = 0; < 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 3.75,3.75 0 1,0 7.5,0 3.75,3.75 0 1,0 -7.5,0', //a small circle             fillcolor: 'red',             fillopacity: 1,             strokecolor: 'blue'         }     }); } 

okay i've found way load symbols in ie9 , below without hanging, it's not @ once other browsers. basically, have throttle addition of markers map using settimout. allows ie9 , below browsers continue working user interaction while proceeds load remaining images. if attempt load many fast without giving browser rest, start choppy in rendering , appear hanging.

important note: seems rendering rate keeps getting slower more choppy gets , when hangs although didn't verify this. personally, 1 @ time shows user it's still laoding markers.

updated fiddle shows improvement throttling.

javascript ended using:
didn't render them in blocks below did in fiddle seems work best (for me) processing them 1 @ time short 200ms interval.

if (ie >= 7 && ie <= 9) {     $.each(arrmarkers, function (index, marker)     {         // throttle addition of markers map         settimeout(function ()         {             marker.setmap(map);         }, index * 200);     }); }  var ie = (function () {     var undef,         v = 3,         div = document.createelement('div'),         = div.getelementsbytagname('i');      while (         div.innerhtml = '<!--[if gt ie ' + (++v) + ']><i></i><![endif]-->',         all[0]     );      return v > 4 ? v : undef; } ());