Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad

Question

I have to implement the multiple markers functionality from array of addresses. The string of addresses are being fetched from the database.

My array of addresses looks like this

    var address = <?php echo $add_js ?>; 

I have gone through so many examples on internet and even in this forum, but in most of the examples latitude and longitude is already available in those databases. Is there any way so that i use that array of address and put multiple markers on google map. or any example where this type of concept is explained?!

I have practiced this example from JSFIDDLE but i am getting no output.

       <script>    var geocoder;        var map;        var markersArray = [];     function initialize()      {         geocoder = new google.maps.Geocoder();      latlang = geocoder.geocode( {              'address': 'New Delhi, India'},                                                           function(results, status)      {             if (status == google.maps.GeocoderStatus.OK)             {               map.setCenter(results[0].geometry.location);               marker = new google.maps.Marker({               map: map,               position: results[0].geometry.location             });             markersArray.push(marker);               }              else            {                alert("Geocode was not successful for the following reason: " + status);                        }            });            var myOptions =            {                       center: latlang, zoom: 5,            mapTypeId: google.maps.MapTypeId.SATELLITE,                       navigationControlOptions:            {                    style: google.maps.NavigationControlStyle.SMALL                       }                       };           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);                      plotMarkers();                     }                 var locationsArray = new Array(                "New Delhi, India", "Gurgaon,Haryana,  India", "Mumbai, India",                 "Noida Sector-63,India","Banglore, Karnataka,India");                function plotMarkers(){    for(var i = 0; i < locationsArray.length; i++){            codeAddresses(locationsArray[i]);            }           }           function codeAddresses(address){          geocoder.geocode( { 'address': address}, function(results, status) {           if (status == google.maps.GeocoderStatus.OK) {             map.setCenter(results[0].geometry.location);             marker = new google.maps.Marker({             map: map,             position: results[0].geometry.location             });         //markersArray.push(marker);          }         else{         alert("Geocode was not successful for the following reason: " + status);         }         });         }          google.maps.event.addDomListener(window, 'load', initialize);          </script> 

Answer 1

Regardless of your situation, heres a working demo that creates markers on the map based on an array of addresses.

http://jsfiddle.net/P2QhE/

Javascript code embedded aswell:

$(document).ready(function () {     var map;     var elevator;     var myOptions = {         zoom: 1,         center: new google.maps.LatLng(0, 0),         mapTypeId: 'terrain'     };     map = new google.maps.Map($('#map_canvas')[0], myOptions);      var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];      for (var x = 0; x < addresses.length; x++) {         $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {             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             });          });     }  });