Google geocoder is asynchronous, so map.fitbounds(latlngbounds) is called before all points have been geocoded. The easiest way to fix this would be to place map.fitbounds(latlngbounds) right after calling the extension.
for(var i = 0; i < arrAddress.length; i++) { geocoder.geocode( { 'address': arrAddress[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); latlngbounds.extend(results[0].geometry.location); map.fitBounds(latlngbounds); } }); }
UPDATE: Here is the best answer. In the last example, the map.fitbounds(latlngbounds) method is called multiple times, which can cause problems when there are a large number of markers. Using the answer in this question , you can create an asynchronous loop to make sure map.fitbounds(latlngbounds) is called only once.
//replaced the for loop. asyncLoop(arrAddress.length, function(loop) { geocoder.geocode({ 'address': arrAddress[loop.iteration()] //loop counter }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); latlngbounds.extend(results[0].geometry.location); } //increment the loop counter. loop.next(); }); }, function() { //when the loop is complete call fit bounds. map.fitBounds(latlngbounds); }); function asyncLoop(iterations, func, callback) { var index = 0; var done = false; var loop = { next: function() { if (done) { return; } if (index < iterations) { index++; func(loop); } else { done = true; callback(); } }, iteration: function() { return index - 1; }, break: function() { done = true; callback(); } }; loop.next(); return loop; }
Example has been updated.
: working code script.
Bryan weaver
source share