How to load large number of markers on Google Map
Credit: https://jsfiddle.net/suchg/qm1pqunz/11/
Discussion thread: http://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/suchg/google.map_markers_multi/master/jquery.ajaxQueue.js"></script>
<script type="text/javascript" >
var place = ['Abdulstad, Michigan','Addisonshire, Oregon','Alvenaville, Louisiana','Alvinaborough, Montana','Alvinabury, Maine','Aurorefurt, Indiana','Bartolettifurt, New Mexico','Batztown, Colorado','Beierburgh, Michigan','Blandaside, California','Boscoville, Maryland','Bradlyville, New York','Brakusborough, Hawaii','Brekkestad, Ohio','Bryanaburgh, Pennsylvania','Bustershire, Kansas','Candidoport, Tennessee','Chelseastad, Mississippi','Christiansenshire, Idaho','Cindyborough, Nevada','Columbusfort, South Carolina','Cordellside, Vermont','Cristinafort, New York','Croninshire, North Carolina','Darioton, Oregon','Deondrebury, Minnesota','Dickinsonfurt, Nevada','DuBuqueport, Pennsylvania','East Benjaminmouth, Washington','East Brookehaven, Kansas','East Brycenfort, Vermont','East Clarissa, Missouri','East Cullen, Utah','East Filomenamouth, Washington','East Gilda, New York','East Jacklyn, Iowa','East Jamey, Ohio','East Josefatown, New Hampshire','East Keiraborough, Vermont','East Marianmouth, Colorado','East Mertie, Colorado','East Minervaville, South Dakota','East Odessaberg, New York','Elwynstad, Georgia','Erynfort, Illinois','Estahaven, North Dakota','Ettieview, Illinois','Eugeniaburgh, Nebraska','Faheybury, Maine','Fayside, Indiana','Felipetown, Georgia','Freddieton, Massachusetts','Geneburgh, Illinois','Geraldton, New Mexico','Gianniburgh, Arizona','Gretchenmouth, North Carolina','Haleighfort, Nebraska','Hanemouth, Utah','Heaneyland, Michigan','Hellerborough, Alabama','Herzogville, Tennessee','Hickleville, Minnesota','Hoegermouth, Delaware','Janicefort, Nevada','Jaredport, Delaware','Jaskolskistad, Wyoming','Jastchester, North Carolina','Jazminmouth, South Dakota','Jordonstad, Virginia','Jovanshire, North Dakota','Juanafurt, North Dakota','Juniorside, Nevada','Kalebmouth, Rhode Island','Kaleton, Florida','Kallietown, Georgia','Kautzerville, Ohio','Kiehntown, West Virginia','Kington, Nevada','Kovacekview, Mississippi','Kreigertown, Maine','Kuhnfurt, New Hampshire','Kundehaven, New Jersey','Lake Anna, Alaska','Lake Bellaland, Minnesota','Lake Danteberg, North Carolina','Lake Darrinshire, Wisconsin','Lake Diamond, Louisiana','Lake Duaneton, District of Columbia','Lake Estel, North Carolina','Lake Graciela, Illinois','Lake Gracieview, New Mexico','Lake Grady, District of Columbia','Lake Izaiah, Ohio','Lake Jaydenshire, Oklahoma','Lake Lelafurt, Wyoming','Lake Loy, Wisconsin','Lake Mariefort, Virginia','Lake Peyton, District of Columbia','Lake Sterling, Alabama','Lanceburgh, Mississippi','Loisbury, California','Lunahaven, North Carolina','Mayland, North Dakota','Meggieside, Alabama','Melliemouth, Florida','Morarmouth, Pennsylvania','Naderview, Michigan','New Adolfville, Alaska','New Archibald, Indiana','New Arielle, Kentucky','New Bonnieville, Nebraska','New Jo, South Carolina','New Kira, Mississippi','New London, Nevada','New Meaganview, Wyoming','New Shermanberg, Connecticut','New Vita, Tennessee','New Wilberside, Ohio','North Carmenborough, Texas','North Celestine, Alabama','North Cletafurt, New York','North Edwardo, Arizona','North Isidro, Rhode Island','North Josie, Hawaii','North Julianside, New York','North Kavon, Massachusetts','North Kaybury, Massachusetts','North Kendra, New Mexico','North Kiannamouth, California','North Laurenceberg, North Dakota','North Madelynborough, New York','North Mayebury, Louisiana','North Ofelia, Washington','North Rachael, Iowa','North Rey, Iowa','North Rosina, Kentucky','North Trey, Maryland','Pagacmouth, Ohio','Paigestad, Louisiana','Pansyview, Hawaii','Paucekville, North Dakota','Piperfurt, Wisconsin','Port Alejandra, Ohio','Port Brooklynfurt, Georgia','Port Cristopherstad, Nebraska','Port Hugh, Illinois','Port Jadonbury, North Carolina','Port Jermainefurt, West Virginia','Port Murray, Alabama','Port Nico, Florida','Port Nico, West Virginia','Port Okeyfurt, Hawaii','Port Orlandmouth, Nebraska','Port Robynville, West Virginia','Port Sharon, Arizona','Port Sim, Florida','Port Winfield, Illinois','Predovicfurt, South Dakota','Romanberg, Oregon','Rooseveltmouth, Iowa','Rosenbaumside, Missouri','Rowehaven, Missouri','Ryanshire, Tennessee','Samirchester, Nevada','Sanfordhaven, Colorado','Saulburgh, Tennessee','Schimmelmouth, Georgia','Sibylfurt, Illinois','Sipesville, Oklahoma','South Audrey, Nevada','South Carmel, Maryland','South D\'angelo, Michigan','South Emilio, Idaho','South Kassandra, Kentucky','South Katelin, California','South Keenan, Mississippi','South Kelleyburgh, Kansas','South Moseberg, Florida','South Roel, Colorado','South Ronfurt, Kansas','Stokeschester, Maine','Streichmouth, Tennessee','Susanashire, Missouri','Torphyside, Wisconsin','Trevorchester, Washington','Turnerton, North Carolina','Ulicesville, Iowa','Veumhaven, Alaska','West Annalise, Florida','West Chasity, New York','West Crawford, Massachusetts','West Donnyville, Nevada','West Granville, Georgia','West Maeve, New Jersey','West Mattieport, Illinois','West Vicentaborough, Maine','West Waylontown, Tennessee','West Wileyville, New Mexico','Windlerton, Illinois','Zackton, Minnesota'];
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXHgKWGY3dXRKUqVL9_cAFPRhidM-nTNM"></script>
<script type='text/javascript'>//<![CDATA[
//function to get random element from an array
(function($) {
$.rand = function(arg) {
if ($.isArray(arg)) {
return arg[$.rand(arg.length)];
} else if (typeof arg === "number") {
return Math.floor(Math.random() * arg);
} else {
return 4; // chosen by fair dice roll
}
};
})(jQuery);
//start code on document ready
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(35.392738, -100.019531),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
//get place from inputfile.js
var placesObject = place;
errorArray = [];
//will fire 20 ajax request at a time and other will keep in queue
var queuCounter = 0, setLimit = 20;
//keep count of added markers and update at top
totalAddedMarkers = 0;
//make an array of geocode keys to avoid the overlimit error
var geoCodKeys = [
'AIzaSyCF82XXUtT0vzMTcEPpTXvKQPr1keMNr_4',
'AIzaSyAYPw6oFHktAMhQqp34PptnkDEdmXwC3s0',
'AIzaSyAwd0OLvubYtKkEWwMe4Fe0DQpauX0pzlk',
'AIzaSyDF3F09RkYcibDuTFaINrWFBOG7ilCsVL0',
'AIzaSyC1dyD2kzPmZPmM4-oGYnIH_0x--0hVSY8'
];
//funciton to add marker
var addMarkers = function(address, queKey){
var key = jQuery.rand(geoCodKeys);
var url = 'https://maps.googleapis.com/maps/api/geocode/json?key='+key+'&address='+address+'&sensor=false';
var qyName = '';
if( queKey ) {
qyName = queKey;
} else {
qyName = 'MyQueue'+queuCounter;
}
$.ajaxq (qyName, {
url: url,
dataType: 'json'
}).done(function( data ) {
var address = getParameterByName('address', this.url);
var index = errorArray.indexOf(address);
try{
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
totalAddedMarkers ++;
//update adde marker count
$("#totalAddedMarker").text(totalAddedMarkers);
if (index > -1) {
errorArray.splice(index, 1);
}
}catch(e){
if(data.status = 'ZERO_RESULTS')
return false;
//on error call add marker function for same address
//and keep in Error ajax queue
addMarkers( address, 'Errror' );
if (index == -1) {
errorArray.push( address );
}
}
});
//mentain ajax queue set
queuCounter++;
if( queuCounter == setLimit ){
queuCounter = 0;
}
}
//function get url parameter from url string
getParameterByName = function ( name,href )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
//call add marker function for each address mention in inputfile.js
for (var x = 0; x < placesObject.length; x++) {
//var address = placesObject[x]['City'] + ', ' + placesObject[x]['State'];
var address = placesObject[x];
addMarkers(address);
}
});
//]]>
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<span>Added markers count</span>:<span id="totalAddedMarker"></span>
</div>
<div id="map_wrapper">
<div id="map_canvas"></div>
</div>
</body>
</html>