Benchmarking Google Maps Marker creation

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.

<!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="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,drawing,places,weather,geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

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);

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() {

</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>

Modified http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,drawing,places,weather,geometry to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,drawing,places,weather,geometry

https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js