Place Nearbysearch Callback Doesn't Iterate Through All Elements (to Return Place Details)

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

Solution 1:

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:

functioninitMap() {
  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);
}

functioncallback(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);
        } elseconsole.log("error: status=" + status);
      });
    });
  }
}

functioncreateMarker(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
}

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