VML slow in IE for many shapes
demo'd by google maps SVG path marker
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<h3>Try in IE first, then in other browser (Chrome, FF, Safari).</h3>
<h4>Speed depends largely on machine<h4>
<input type="button" value="add 10 markers - fast (seconds)" onclick="addMarkers(10);" ></button><br>
<input type="button" value="add 50 markers - still fast (seconds)" onclick="addMarkers(50);" ></button><br>
<input type="button" value="add 100 markers - still under a minute" onclick="addMarkers(100);" ></button><br>
<input type="button" value="add 500 markers - will bring webpage to slow crawl (couple of minutes)" onclick="addMarkers(500);" ></button><br>
<div id="map"></div>
CSS
#map {
height: 400px;
width: 600px;
}
JavaScript
var locations = new Array();
populateLocations();
var markers = new Array();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(32.739867, -117.120592),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function addMarkers(numMarkersToUse)
{
clearExistingMarkers();
for (var i = 1; i < numMarkersToUse; i++)
{
markers.push(
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(locations[i].LATITUDE, locations[i].LONGITUDE),
icon: {
path: getSvgPath(),
fillColor: 'red',
fillOpacity: 1,
strokeColor: 'blue'
}
})
);
}
}
function clearExistingMarkers()
{
for (var x = 0; x < markers.length; x++)
{
markers[x].setMap(null);
}
}
function populateLocations()
{
locations[1] = {LATITUDE: '32.71887', LONGITUDE: '-117.11544'};
locations[2] = {LATITUDE: '32.71887', LONGITUDE: '-117.11544'};
locations[3] = {LATITUDE: '32.71961', LONGITUDE: '-117.12384'};
locations[4] = {LATITUDE: '32.75210', LONGITUDE: '-117.14204'};
locations[5] = {LATITUDE: '32.74910', LONGITUDE: '-117.13793'};
locations[6] = {LATITUDE: '32.74663', LONGITUDE: '-117.12243'};
locations[7] = {LATITUDE: '32.74423', LONGITUDE: '-117.13685'};
locations[8] = {LATITUDE: '32.74861', LONGITUDE: '-117.14400'};
locations[9] = {LATITUDE: '32.74901', LONGITUDE: '-117.13769'};
locations[10] = {LATITUDE: '32.74646', LONGITUDE: '-117.13649'};
locations[11] = {LATITUDE: '32.73495', LONGITUDE: '-117.12046'};
locations[12] = {LATITUDE: '32.75150', LONGITUDE: '-117.11508'};
locations[13] = {LATITUDE: '32.74751', LONGITUDE: '-117.14407'};
locations[14] = {LATITUDE: '32.74675', LONGITUDE: '-117.12836'};
locations[15] = {LATITUDE: '32.73843', LONGITUDE: '-117.13075'};
...