Google Map V3 : Only some markers are displayed

Question

I have the following code which should display several markers for places in an array and each marker on click will display an info window everything works fine except that out of 21 places I am able to display only 8 Markers.

// declare Variables
   var geocoder;
   var map;
   var tex;     
   var markersArray = [];
   // pids array 21 addreses
    var pids = [{ad:'251 Pantigo Road Hampton Bays NY 11946',pid:'9'},
    {ad:'Amagensett Quiogue NY 11978',pid:'10'},
    {ad:'789 Main Street Hampton Bays NY 11946',pid:'12'},
    {ad:'30 Abrahams Path Hampton Bays NY 11946',pid:'14'},
    {ad:'3 Winnebogue Ln Westhampton NY 11977',pid:'15'},
    {ad:'44 White Oak Lane Montauk NY 11954',pid:'16'},
    {ad:'107 stoney hill road Bridgehampton NY 11932',pid:'17'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'19'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'20'},
    {ad:'44 Woodruff Lane Wainscott NY 11975',pid:'21'},
    {ad:'Address East Hampton NY 11937',pid:'46'},
    {ad:'Address Amagansett NY 11930',pid:'49'},
    {ad:'Address Remsenburg NY 11960 ',pid:'50'},
    {ad:'Address Westhampton NY 11977',pid:'51'},
    {ad:'prop address Westhampton Dunes NY 11978',pid:'52'},
    {ad:'prop address East Hampton NY 11937',pid:'53'},
    {ad:'Address East Hampton NY 11937',pid:'58'},
    {ad:'Address Southampton NY 11968',pid:'59'},
    {ad:'Address Bridgehampton NY 11932',pid:'60'},
    {ad:'Address Sagaponack NY 11962',pid:'61'}];

    // create an MVCobject for creating Info window on marker
   var pin = new google.maps.MVCObject();
   // The content placeholder for the Info window. 
   var content = document.createElement("DIV");   
   var title = document.createElement("DIV");
   content.appendChild(title);
   // that is where you have the ajax result placed
   var streetview = document.createElement("DIV");
   streetview.style.width = "326px";
   streetview.style.height = "212px";
   content.appendChild(streetview);
   var infowindow = new google.maps.InfoWindow({
       content: content
   });
       // Initialize
   function initialize() {
       geocoder = new google.maps.Geocoder();
       var latlng = new google.maps.LatLng(40.8687097, -73.0014946);
       var myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       getAllPids();
   }
   // loop to create all markers
   function getAllPids() {
       var i;
      for (i = 0; i < pids.length; i++) {
           var test = pids[i];
           codeAddress(test);
       }        
   }
   // get latlng for each address , create marker  and add eventlistner to click open infowindow 
   function codeAddress(place) {
       geocoder.geocode({ 'address': place.ad }, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location,
                   title: place.pid
               });
               markersArray.push(marker);                  
               google.maps.event.addListener(marker, "click", function() {
                   openInfoWindow(marker);
               });
            } else {
               // alert("Geocode was not successful for the following reason: " + status);
           }
       });
   }
   // click event on marker calls this to show infowindow.
   function openInfoWindow(marker) {        
    getContent(marker.getTitle());          
       pin.set("position", marker.getPosition());
       infowindow.open(map, marker);
   }
   // Now ajax call to get the content for the current info window
   function getContent(pid) {          
      $.ajax({
                        type: "POST",
                        url: "mapSearchResult.aspx/get_map",                            
                        data: "{'pids':'"+pid +"'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(msg) {

                         title.innerHTML =msg.d; 

                        }
                    });          
   }

Answer 1

If you uncommented this

// alert("Geocode was not successful for the following reason: " + status);

you would find that the reason code is OVER_QUERY_LIMIT (620).

There is a rate limit: if you geocode many addresses without introducing a delay between them you will break that limit because you are doing too many in too short a time.

Some of your addresses won't geocode (or won't produce the result you want), because the geocoder uses postal addresses. Addresses like Address East Hampton NY 11937 or prop address Westhampton Dunes NY 11978 aren't postal addresses.

The recommended strategy is not to waste Google's resources which you share with others. Geocode your addresses yourself in a one-off operation, store those locations in your database (or use them directly in code) and then use the coordinates to position markers. Don't bother to find locations you already know about every time the page is loaded. Only use the geocoder to find locations you don't know in advance: addresses entered by your users.

If you really must subvert that strategy and geocode everything all the time, then you need to slow the requests down. As you submit more requests, you will probably have to slow them down more to satisfy the geocoder. I've made a Version 3 example (from a noted Version 2 example) at http://acleach.me.uk/gmaps/v3/plotaddresses.htm — you can see it starts out with a 100ms delay between requests, but needs to slow down to around 150ms after twenty iterations.