Place nearbySearch Callback doesn't iterate through all elements (to return place details)

Question

I have a little problem regarding JavaScript with Google Maps API. I need to find all the stores near a certain place, so I have a function that contains this:

service = new google.maps.places.PlacesService(map);
service.nearbySearch({
                   location: my_loc,
                   radius: 500,
                   type: ['store']
               }, callback);

The callback function looks like this:

function callback(results, status) {
           if (status === google.maps.places.PlacesServiceStatus.OK) {                                 
               results.map(function (item) {
                     // do things here
               });
           }
}

The problem is that the results array has 16 elements (if I alert(results.length) in callback, it shows the value 16, which is right), however the mapping over results only takes into account 10 of them. What is strange is that if I add "alert(item)" in the mapping function, then it will take into account all the 16 elements and do the right stuff with them.

Why does this alert make the function see the whole array? And how can I make it see all the elements without that alert? Thanks!

UPDATE: Full code

function initMap() {
           var lng;
           var lat;
           navigator.geolocation.getCurrentPosition(function (position) {                   
               var my_loc = { lat: position.coords.latitude, lng: position.coords.longitude };                   
               map = new google.maps.Map(document.getElementById('map'), {
                   center: my_loc,
                   zoom: 15
               });
               geocoder = new google.maps.Geocoder;
               infowindow = new google.maps.InfoWindow();
               service = new google.maps.places.PlacesService(map);
               service.nearbySearch({
                   location: my_loc,
                   radius: 500,
                   type: ['store']
               }, callback);
           }, handle_errors);               
       }

function callback(results, status) {
           if (status === google.maps.places.PlacesServiceStatus.OK) {                   
               results.map(function (item) {                     
                   var id = item.place_id;
                   service.getDetails({ placeId: id }, function (place, status) {
                       if (status === google.maps.places.PlacesServiceStatus.OK) {
                           var lista = document.getElementById("lista");
                           var elem = document.createElement("tr");
                           var text1 = document.createTextNode(place.name + " ");
                           var sp1 = document.createElement("td");
                           sp1.appendChild(text1);
                           elem.appendChild(sp1);
                           lista.appendChild(elem);
                           createMarker(item);
                        }
                    });
                });
             }
}

function createMarker(place) {
           var placeLoc = place.geometry.location;
           var marker = new google.maps.Marker({
               map: map,
               position: place.geometry.location
           });
           google.maps.event.addListener(marker, 'click', function () {
               infowindow.setContent(place.name);
               infowindow.open(map, this);
           });
       }


function handle_errors(error) {
           alert("Geolocation is not enabled");
           }

Are you sure? Sometimes you can't see a marker if there is another one on top of it. Please provide a [mcve] that demonstrates the issue. — geocodezip, Mar 07 '17 at 17:01
You didn't provide a [mcve] that exhibits the issue. Please provide a value for `my_loc` that exhibits the issue. I get a javascript error with your code: `Uncaught ReferenceError: handle_errors is not defined` — geocodezip, Mar 07 '17 at 17:52
That is the javascript code which takes only 10 out of the 16 items in results. What else should I have provided? — flaviumanica, Mar 07 '17 at 17:55
Added handle_errors. It only alerts something. And in the html there is a div with id="map" and a table with id="lista" — flaviumanica, Mar 07 '17 at 17:58

geocodezip · Accepted Answer · 2020-05-20T02:58:15.587

You are calling .getDetails on each result returned. That method is subject to a quota and a rate limit. If you exceed the rate limit, the service returns a status of OVER_QUERY_LIMIT, which your current code is ignoring.

proof of concept fiddle

To address the issue, you need to slow your requests to the details service down to comply with the rate limit. Related question: OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?

code snippet:

function initMap() {
  var lng;
  var lat;
  var my_loc = new google.maps.LatLng(37.4419, -122.1419);
  map = new google.maps.Map(document.getElementById('map'), {
    center: my_loc,
    zoom: 10
  });
  geocoder = new google.maps.Geocoder;
  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: my_loc,
    radius: 10000,
    type: ['store']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    console.log("nearbySearch returned " + results.length + " results")
    results.map(function(item) {
      var id = item.place_id;
      service.getDetails({
        placeId: id
      }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          createMarker(item);
        } else console.log("error: status=" + status);
      });
    });
  }
}

function createMarker(place) {
  console.log("adding place " + place.name + " loc=" + place.geometry.location.toUrlValue(6));
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

I see. But why does it work then when an alert("smth") is added? And is there any way I can make it work without that alert? — flaviumanica, Mar 07 '17 at 18:13
It works with the `alert` because that slows down the requests to less than the rate limit. To address the issue, you need to make your requests to the details service comply with the rate limit. Related question: [OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?](http://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl) — geocodezip, Mar 07 '17 at 18:33

Place nearbySearch Callback doesn't iterate through all elements (to return place details)

1 Answers1

Linked