Setinterval or settimeout for google map v3
... I have 50 addresses from sql. Each address will appear inside a divAddress. I scroll through each one, geocode and draw a marker on the map. But it only displays 11 of the. I know this is due to the fact that the geocoder is narrow. How do I use setinterval or settimeout to control this? I have researched and seen people using setimeout to handle this. Please help me...
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.095287, -79.3185139);
var myOptions = {
maxZoom: 14,
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function codeAddress() {
var infowindow = new google.maps.InfoWindow({});
$('.LocationAddress').each(function() {
var addy = $(this).text();
geocoder.geocode( { 'address': addy}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:addy,
});
//Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
+'<div id=\"LeftInfo\">'+ "Hello World!"
+'</div>'+'</div>');
infowindow.open(map, this);
});
}
});//Geocoder END
});
}
+3
source to share
2 answers
I actually coded it and tested it, this one worked:
var geocoder;
var map;
var addresses = new Array();
var infowindow;
var theInterval;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.095287, -79.3185139);
var myOptions = {
maxZoom: 14,
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
}
$(document).ready(function () {
getAddresses();
theInterval = setInterval("codeAddress()", 1000);
});
function getAddresses () {
$('.LocationAddress').each(function () {
addresses.push($(this).text());
});
}
function codeAddress() {
if (addresses.length == 0) {
clearInterval(theInterval);
}
var addy = addresses.pop();
geocoder.geocode({
'address': addy
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: addy,
});
//Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>' + '<div id=\"LeftInfo\">' + "Hello World!" + '</div>' + '</div>');
infowindow.open(map, this);
});
}
}); //Geocoder END
}
+1
source to share
You can serialize requests to process one address at a time. When it ends, you process the next one. This can be done as follows:
function codeAddress() {
var infowindow = new google.maps.InfoWindow({});
var addresses = $('.LocationAddress');
var addressIndex = 0;
function next() {
if (addressIndex < addresses.length) {
var addy = addresses.eq(addressIndex).text();
++addressIndex;
geocoder.geocode( { 'address': addy}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:addy,
});
//Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
+'<div id=\"LeftInfo\">'+ "Hello World!"
+'</div>'+'</div>');
infowindow.open(map, this);
});
next();
}
});//Geocoder END
}
}
next();
}
0
source to share