Benchmarking Google Maps Marker creation

README.md

This example creates 2000 random coordinate pairs nearby San Francisco. You can use the buttons to print them using a synchronous loop or an asynchronous loop.

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>

.counties {
  fill: none;
  stroke: #00c;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
#thissvg {
	position:absolute;
	left:0;
	top:0;
	z-index: 50;
}

#map-canvas {
	position:absolute;
	left:20px;
	top:41px;
	z-index: 30;
}

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

</style>
<body>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,drawing,places,weather,geometry"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>



<script>
	var width = 900,
  	height = 600,
	globalOverlay = null,
	map = null;
			var url = './illinois.json';

	jQuery(document).ready(function() {
		jQuery('#map-canvas').width(width);
		jQuery('#map-canvas').height(height);
	}); 
	var sflat=37.75,
	sflng = -122.45,
	markersArray=[],
	infowindow;

	function initialize() {
		 		map = new google.maps.Map(document.getElementById('map-canvas'), {
					zoom: 13,
					center: {lat: sflat, lng: sflng}
				});
		 		 
		 		

		//map.data.loadGeoJson(url);

		var featureStyle = {
		    fillColor: 'transparent',
		    strokeWeight: 2,
		    strokeColor: 'red'
		  };
		  map.data.setStyle(featureStyle);
 		
 		infowindow = new google.maps.InfoWindow();
		 
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	function clearMarkers(caller, callback) {
		// let's clear any existing marker
		jQuery('#benchmark').html('Preparing for <b>'+caller+'</b> draw routine');
		while(markersArray.length) {
			var marker=markersArray.pop();
			marker.setMap(null);
		}
		var coordsArray=[];
		for (var j=0;j<2000;j++) {
			coordsArray.push(
				new google.maps.LatLng(
					sflat+(Math.random()-0.5)/15,
					sflng-(Math.random()-0.5)/11
				)
			);
		}
		setTimeout(function(){
			var timeini=new Date().getTime();
			callback(coordsArray, timeini);	
		},1000);
		
	}

	jQuery(document).on('click','#syncdraw',function() {
		clearMarkers('Synchronous', function(coordsArray,timeini) {
			for(var index=0;index<coordsArray.length;index++) {
				var neighborMarker = new google.maps.Marker({
                                            position: coordsArray[index],
                                            map: map,
                                            title:'Marker '+index,
                                            icon:'https://cloud.githubusercontent.com/assets/238439/4837488/459bac1e-5fd7-11e4-942f-696c6b4c387b.png'
                                        });

				google.maps.event.addListener(neighborMarker, 'click', (function (neighborMarker, index) {
                                        return function () {
                                            infowindow.setContent('This is marker '+index+ '  ');
                                            infowindow.open(map, neighborMarker);
                                        }
                                    })(neighborMarker, index));
				markersArray.push(neighborMarker );
			}
			var timeend=new Date().getTime();
			jQuery('#benchmark').html('Asynchronous routine finished in <b>'+(timeend-timeini)+'</b> msecs');
		});
	});

	jQuery(document).on('click','#asyncdraw',function() {

		var createmarker=function(coordinates,index) {
			setTimeout(function() {
					var neighborMarker = new google.maps.Marker({
                                            position: coordinates,
                                            map: map,
                                            title:'Marker '+index,
                                            icon:'https://cloud.githubusercontent.com/assets/238439/4837489/46de6daa-5fd7-11e4-9622-0e1cc674f6b2.png'
                                        });
				
					google.maps.event.addListener(neighborMarker, 'click', (function (neighborMarker, index) {
	                                        return function () {
	                                            infowindow.setContent('This is marker '+index+ '  ');
	                                            infowindow.open(map, neighborMarker);
	                                        }
	                                    })(neighborMarker, index));
					markersArray.push(neighborMarker );
				},10);
		};
		clearMarkers('Asynchronous',function(coordsArray,timeini) {
			for(var index=0;index<coordsArray.length;index++) {
				createmarker(coordsArray[index], index);
			}
			var timeend=new Date().getTime();
			jQuery('#benchmark').html('ASynchronous routine finished in <b>'+(timeend-timeini)+'</b> msecs');
		});
	});

</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="width:900px;height:30px;border:1px solid #CCC;">
	<button id="syncdraw" style="float:left;">Draw Markers Sync</button>
	<button id="asyncdraw" style="float:left;">Draw Markers ASync</button>
	<span id="benchmark" style="margin:10px;text-align:right;float:left;"></span>
</div>
</body>
</html>