over query limit also with setTimeout - google-maps

Question

I'm trying to use google maps geocoder and getting over query limit.
this is my code
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 12,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
for (var i = 1; i < 20; i++) {
var address = document.getElementById('address' + " " + i).value;
setTimeout(geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
}));
}
}
google.maps.event.addDomListener(window, 'load', initialize, codeAddress.bind);

Answer 1

You didn't specify the delay(2nd argument of setTimeout)
You must set it to an incrementing value to avoid the error, e.g. i*150 , then the calls will be after 150ms,300ms,450ms and so on
function codeAddress() {
for (var i = 1; i < 20; i++) {
var address = document.getElementById('address' + " " + i).value;
setTimeout(geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' +
status);
}
}),
i*150//<-delay for the timeout in ms
);
}
}