Google Maps API not displaying all markers

Question

I'm working on an API for a property search system and I'm trying to get the properties to display as markers on a Google map. Everything is working fine with the API, I'm getting valid responses, exactly what I'm looking for and what I expect to get. The problem I'm having is with the markers.

I'm limiting the response to 100 properties, and requiring that they have the information to be geocoded. I get 100 properties and can loop through and list them all, but I only get 11 markers max on the map. Not changing the criteria at all and searching again should return the same results, but I get a different set of markers. Search again and I get one marker.

I'm also having trouble with the markers variable. I've set it as an empty array on load, then push each property's marker to it, yet when I console log the array, it's always empty.

Here's the entire javascript:

<script>
    var user    = "bac0Fmk5";
    var key     = "Vkjx5BV8VeYOxAixFD";
    var secret  = "CU5g6wQR2ZJV7";

    var markers = [];

$(document).ready(function(){
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(30.1767, -85.8056),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }); 

    var geocoder =  new google.maps.Geocoder();

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    $('#search_btn').click(function(){
        clearOverlays();

        $.ajax({
            type: 'POST',
            dataType: "json",
            async: false,
            url: "api/ex.api.php",
            data: {
                user:           user,
                key:            key,
                secret:         secret,
                area:           $('#area').val(),
                category:       $('#type').val(),
                min_price:      $('#min_price').val(),
                max_price:      $('#max_price').val(),
                bedrooms:       $('#bedrooms').val(),
                bathrooms:      $('#bathrooms').val(),
                subdivision:    $('#subdivision').val(),
                city:           $('#city').val(),
                mls_acct:       $('#mls_acct').val()
            },
            success: function (responseData, textStatus, jqXHR) {
                // console.log(responseData);
                // console.log(jqXHR);
                $.each(jqXHR.responseJSON, function(i, e){
                    //console.log(e.mls_acct);

                    geocoder.geocode( { 'address': e.street_num+' '+e.street_name+' '+e.city+','+e.state+' '+e.zip}, function(results, status) {
                          if (status == google.maps.GeocoderStatus.OK) {
                            // console.log("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
                            var lat = results[0].geometry.location.lat();
                            var lng = results[0].geometry.location.lng();
                            //window.locs.push([lat, lng]);

                            if(e.street_num == '' || e.street_name == '' || e.city == '' || e.state == '' || e.zip == '')
                            {
                                console.log('got a dead one');
                            }

                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });
                            markers.push(marker);

                            bindInfoWindow(marker, map, infowindow, "<div><h2>"+e.mls_acct+"</h2></div>");
                        }
                    });
                });
            },
            error: function (responseData, textStatus, errorThrown) {
                console.log('Response Data: ' + responseData);
                console.log('Status: ' + textStatus);
                console.log('Error Thrown: ' + errorThrown);
            }
        });

        return false;
    });
});

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
}

function clearOverlays() {
  for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
  }
  markers.length = 0;
}
</script>

Answer 1

You are silently ignoring the GeocoderStatus when it is not "OK". You are probably getting OVER_QUERY_LIMIT responses. Add an alert, to at least let you know why it is failing:

                geocoder.geocode( { 'address': e.street_num+' '+e.street_name+' '+e.city+','+e.state+' '+e.zip}, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                        // console.log("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
                        //window.locs.push([lat, lng]);

                        if(e.street_num == '' || e.street_name == '' || e.city == '' || e.state == '' || e.zip == '')
                        {
                            console.log('got a dead one');
                        }

                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });
                        markers.push(marker);

                        bindInfoWindow(marker, map, infowindow, "<div><h2>"+e.mls_acct+"</h2></div>");
                    } else alert("Geocode failed, status="+status);
                });