Google maps предлагает запрос, возвращающий неопределенные результаты?

Question

Я пытаюсь разместить запрос места с помощью API карт Google Maps, но мои результаты всегда не определены?

Любые предложения? Мои другие функции способны правильно инициализировать объект карты, и я могу видеть свою карту с маркерами без этой функции места?

Если бы кто-нибудь мог заметить ошибку в этой функции, я был бы чрезвычайно благодарен!

$scope.placeRequest = function(map){ 
       var location = new google.maps.LatLng(39.6303225,-106.57294); 
       var service = new google.maps.places.PlacesService(map); 

       service.nearbySearch({ 
        location: location, 
        radius: 5000, 
        types: ['lodging','art_gallery','restaurant','bar', 'spa','museum'] 
       }, callback()); 

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

Answer 1

Ваши результаты всегда неопределенными, потому что вы используете параметр callback неправильно. Этот синтаксис не является правильным, он вызывает функцию callback и использует результаты этого вызова (нуль) в качестве функции обратного вызова:

service.nearbySearch({ 
    location: location, 
    radius: 5000, 
    types: ['lodging','art_gallery','restaurant','bar', 'spa','museum'] 
      }, callback()); 

Оно должно быть:

service.nearbySearch({ 
    location: location, 
    radius: 5000, 
    types: ['lodging','art_gallery','restaurant','bar', 'spa','museum'] 
      }, callback); 

proof of concept fiddle

код фрагмента:

var geocoder; 
 
var map; 
 
var infowindow; 
 
var $scope = { 
 
    places: [] 
 
}; 
 

 
function initialize() { 
 
    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 
 
    }); 
 
    var location = new google.maps.LatLng(39.6303225, -106.57294); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    infowindow = new google.maps.InfoWindow(); 
 

 
    service.nearbySearch({ 
 
    location: map.getCenter(), 
 
    radius: 5000, 
 
    types: ['lodging', 'art_gallery', 'restaurant', 'bar', 'spa', 'museum'] 
 
    }, callback); 
 

 
    function callback(results, status) { 
 
    console.log(results); 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
     for (var i = 0; i < results.length; i++) { 
 
     console.log(results[i].name + ":" + results[i].geometry.location); 
 
     $scope.places.push(results[i]); 
 
     createMarker(results[i]); 
 
     } 
 
    } else alert("places request failed, status=" + status) 
 
    }; 
 

 
    function createMarker(place) { 
 
    var placeLoc = place.geometry.location; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: place.geometry.location, 
 
     title: place.name 
 
    }); 
 

 
    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>