Google Adresses API Web incorrectement jeter l'erreur et la rupture des cartes sur nearbySearch

Question

je tente de tirer certains endroits de l'API Web Places afin de tirer quelques repères sur une carte. Il semble que c'est de lancer correctement une erreur:

Uncaught Error: Missing parameter. You must specify location. 

in places_impl.js:35 

Mon code suivant:

var bounds = map.getBounds(); 
var service = new google.maps.places.PlacesService(map); 

service.nearbySearch({ 
    bounds: bounds, 
    type: ['natural_feature'] 
}, callback); 

et il devrait fonctionner selon la documentation:

This method takes a request with the following fields:

Either of: bounds, which must be a google.maps.LatLngBounds object defining the rectangular search area; or

a location and a radius; the former takes a google.maps.LatLng object, and the latter takes a simple integer, representing the circle's radius in meters. The maximum allowed radius is 50 000 meters. Note that when rankBy is set to DISTANCE, you must specify a location but you cannot specify a radius or bounds.

https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Answer 1

Le problème est que bounds n'est pas valide lorsque vous appelez le service.

La carte est initialisé de manière asynchrone, les limites ne sont pas disponibles jusqu'à ce que l'événement se déclenche bounds_changed pour la première fois.

Attendez que l'événement « bounds_changed » incendies sur la carte avant d'utiliser map.getBounds().

google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    var service = new google.maps.places.PlacesService(map); 

    service.nearbySearch({ 
    bounds: bounds, 
    type: ['natural_feature'] 
    }, callback); 
}); 

proof of concept fiddle

extrait de code:

var geocoder; 
 
var map; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
 
    var bounds = map.getBounds(); 
 
    var service = new google.maps.places.PlacesService(map); 
 

 
    service.nearbySearch({ 
 
     bounds: bounds, 
 
     type: ['natural_feature'] 
 
    }, callback); 
 
    }); 
 

 
    function callback(results, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
     for (var i = 0; i < results.length; i++) { 
 
     createMarker(results[i]); 
 
     } 
 
    } 
 
    } 
 

 
    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); 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> 
 
<div id="map_canvas"></div>