Google Maps JavaScript Places API - URL undefined

Question

我正在將Google Maps API集成到我正在處理的網站中。大多數情況下，它會按需要執行;但是，在撥打附近的搜索服務時，我很難獲取返回的網址（位置的Google地圖頁面）。根據我對Google文檔的理解，這個調用返回一個帶有各種屬性的PlaceResult對象，包括url.I能夠正確訪問其他兩個屬性，名稱和附近，但是url屬性未定義。這個問題可能是什麼？謝謝。

相關的代碼片段：

var keyword = document.getElementById("searchBox").value; 
var requestOptions = { 
location: { lat: 37.3011339, lng: -89.5770238}, 
radius: '5000', 
keyword: keyword 
}; 

placesService = new google.maps.places.PlacesService(hotelMap); 
placesService.nearbySearch(requestOptions, findCallback); 

}); 

}; // end initiallize 

function findCallback(results, status) { 

var resultsList = ""; 


    if (status == google.maps.places.PlacesServiceStatus.OK) { 

    for (var i = 0; i < results.length; i++) { 

     alert(results[i].url); // this returns undefined   
    resultsList += "<li>" + results[i].name + ": " + results[i].vicinity + " - <a href='" + results[i].url + "'>View Details</a></li>"; 

    } 

    document.getElementById("searchList").innerHTML = resultsList; 



    } 
} 

參考：

https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

Answer 1

看起來，物業是不是在nearbySearch查詢返回的PlaceResult可用。該查詢返回的結果中的placeIds詳細信息請求會返回包含該屬性的結果。

根據我對文檔的閱讀，唯一應該返回「受限制」PlaceResult的查詢是radarSearch，但這似乎不是它工作的方式。

proof of concept fiddle

代碼片段：

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

 
function initialize() { 
 
    hotelMap = 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 keyword = document.getElementById("searchBox").value; 
 
    var requestOptions = { 
 
    location: { 
 
     lat: 37.3011339, 
 
     lng: -89.5770238 
 
    }, 
 
    radius: '5000', 
 
    keyword: keyword 
 
    }; 
 

 
    placesService = new google.maps.places.PlacesService(hotelMap); 
 
    placesService.nearbySearch(requestOptions, findCallback); 
 

 
}; // end initiallize 
 

 
function findCallback(results, status) { 
 
    var resultsList = ""; 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < results.length; i++) { 
 
     console.log(results[i].url); 
 
     console.log(results[i]); 
 
     resultsList += "<li>" + results[i].name + ": " + results[i].vicinity + " - <a href='" + results[i].url + "'>View Details</a></li>"; 
 
     var marker = new google.maps.Marker({ 
 
     position: results[i].geometry.location, 
 
     map: hotelMap, 
 
     title: results[i].name, 
 
     placeId: results[i].place_id 
 
     }); 
 
     bounds.extend(marker.getPosition()); 
 
     google.maps.event.addListener(marker, 'click', (function(marker) { 
 
     return function(evt) { 
 
      var service = new google.maps.places.PlacesService(hotelMap); 
 
      service.getDetails({ 
 
      placeId: this.placeId 
 
      }, function(place, status) { 
 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
       var content = '<div><strong>' + place.name + '</strong><br>' + 
 
       'Place ID: ' + place.place_id + '<br>' + 
 
       place.formatted_address + '<br>'; 
 
       if (place.url) { 
 
       content += '<a href=' + place.url + ' target="_blank">[link]</a>'; 
 
       } 
 
       content += '</div>'; 
 
       infowindow.setContent(content); 
 
       infowindow.setPosition(place.geometry.location); 
 
       infowindow.open(hotelMap, marker); 
 
      } 
 
      }); 
 
     } 
 
     })(marker)); 
 
    } 
 
    hotelMap.fitBounds(bounds); 
 
    } 
 
    document.getElementById("searchList").innerHTML = resultsList; 
 
} 
 
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=places"></script> 
 
<input id="searchBox" value="coffee" /> 
 
<div id="map_canvas"></div> 
 
<div id="searchList"></div>