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.
xxxxxxxxxx
<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>
<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>
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