近くに配置された検索コールバックは、すべての要素を繰り返し処理しません（場所の詳細を返すため）

Question

Google Maps APIを使用したJavaScriptに関しては少し問題があります。私は特定の場所の近くにすべての店舗を見つける必要があるので、私はこれが含まれている機能を持っている：

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

コールバック関数は次のようになります。

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

問題は結果の配列が持っているということです16要素（コールバックでalert（results.length）を指定した場合は値16が表示されますが、結果のマッピングには10個しか考慮されません）。奇妙なのは、マッピング機能に「alert（item）」を追加すると、16個の要素すべてが考慮され、適切なものが実行されるということです。

このアラートによって、関数が配列全体を表示するのはなぜですか？そして、その警告なしですべての要素を見えるようにするにはどうすればよいですか？ありがとう！

UPDATE：フルコード

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"); 
      } 

Answer 1

あなたが返される各結果に.getDetailsを呼び出しています。その方法は割り当て制限の対象であり、レート制限です。レート制限を超えた場合、サービスは現在のコードを無視してOVER_QUERY_LIMITというステータスを返します。

proof of concept fiddle

問題に対処するには、レート制限を遵守する詳細サービスへのご要望を遅くする必要があります。関連質問：OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?

コードスニペット：

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"></script> 
 
<div id="map"></div>