I'm trying to generate a Google Map based off of results from a database. I can get the addresses geocoded and put out on the map, but I'm not able to do it very quickly. I have a setTimeout function to help with loading the markers; if i do not include it then not all of the markers will load.
Is there any way for me to push out the markers quickly? The markers will also eventually have InfoWindows on them as well. Note: I am using ColdFusion and SQL. Here is what happens. Here is my code so far:
<body onLoad="initialize()">
<div id="map_canvas" class="grid_12">
</div>
</div>
<!end .container_12>
</body>
<script type="text/javascript">
function initialize(){
// Prepare the array from ColdFusion and database
var locations = [
<cfset locationArray=ArrayNew(1)>
<cfloop query="GetLocations">
<cfscript>
ArrayAppend(locationArray, #Client_Address# & ' ' & #Client_City# & ' ' & #Client_State# & ' ' & #Client_Company#);
</cfscript>
'<cfoutput>#Client_Address# #Client_City# #Client_State#</cfoutput>',
</cfloop>
];
//Set options of the google map
var mapOpt = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(42.48019996901214, -90.670166015625),
zoom: 8
};
//Create new map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOpt);
var geocoder = new google.maps.Geocoder();
var index = 0;
//Begin geocoding function converting addresses to LatLng
var geocoderFunction = function () {
geocoder.geocode({ 'address': locations[index] }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: ''
});
}
// Call the geocoder with a 150ms delay
index++;
if (locations.length > index) {
setTimeout(geocoderFunction, 150);
}
});
}
// Launch the geocoding process
geocoderFunction();
}
</script>
</html>
I'm fairly new at this, so any help would be appreciated!