Google Places API - 未定义详细信息请求

时间:2012-03-01 17:16:09

标签: javascript google-places-api

我正在尝试使用Google商家信息库检索地点详细信息。当您点击地点标记时,我希望能够看到地址,名称,网站等。

我正在使用以下教程: http://code.google.com/apis/maps/documentation/javascript/places.html

一切似乎进展顺利。在我的标记中,我可以显示名称和评级,但地址,网站和电话号码都显示为“未定义”。这是因为谷歌没有我在这些地方要求的信息吗?或者我做错了什么?

这是我正在使用的代码:         var map;       var infowindow;

  function initialize() {
    var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

    map = new google.maps.Map(document.getElementById('map_canvas'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

    var request = {
      location: pyrmont,
      radius: 5000,
      types: ['bar']
    };
    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
    service.search(request, 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 + "<br />" + place.formatted_address +"<br />" + place.website + "<br />" + place.rating + "<br />" + place.formatted_phone_number);
      infowindow.open(map, this);
    });
  }

非常感谢任何帮助或想法。

干杯。

JA

2 个答案:

答案 0 :(得分:19)

您正在进行地方搜索,但不会返回您正在使用的所有字段:

http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_responses

要获取地址,网站等,您还需要致电place.getDetails(),并传递地方reference。参见:

http://code.google.com/apis/maps/documentation/javascript/places.html#place_details_requests

粗略地说,您的代码将更改为:

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

    var request = { reference: place.reference };
    service.getDetails(request, function(details, status) {
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
        infowindow.open(map, this);
      });
    });
  }

答案 1 :(得分:0)

基于上面的Mikes响应,我建议像下面这样将呼叫移到侦听器中。这样,仅当用户单击标记时才进行对API的调用,而不是在呈现许多标记的情况下进行数百次调用。

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

    var request = { reference: place.reference };

    google.maps.event.addListener(marker, 'click', function() {
      service.getDetails(request, function(details, status) {
      infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
      infowindow.open(map, this);
    });
});

}