Google Maps JavaScript Places API - URL undefined

Question

Ich integriere das Google Maps API in eine Website, an der ich gerade arbeite. Zum größten Teil funktioniert es wie gewünscht; Bei einem Anruf beim nahe gelegenen Suchdienst habe ich jedoch Schwierigkeiten, die URL (auf der Google Maps-Seite für den Standort) zurückzugeben. Nach meinem Verständnis der Google-Dokumentation, gibt dieser Aufruf ein PlaceResult-Objekt mit verschiedenen Eigenschaften, einschließlich URL. Ich bin in der Lage, auf zwei andere Eigenschaften, Name und Umgebung, richtig zuzugreifen, aber die URL-Eigenschaft kommt als undefined zurück. Was könnte das Problem sein? Vielen Dank.

Der entsprechende Code-Schnipsel:

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; 



    } 
} 

Zum Vergleich:

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

Answer 1

Es sieht aus wie diese Eigenschaft in den PlaceResult nicht verfügbar ist in der nearbySearch Abfrage zurückgegeben werden. Eine Detailanforderung für die placeIds aus den von dieser Abfrage zurückgegebenen Ergebnissen gibt Ergebnisse mit dieser verfügbaren Eigenschaft zurück.

Nach meinem Lesen der Dokumentation, die einzige Abfrage, die eine "begrenzte" PlaceResult zurückgeben sollte, ist radarSearch, aber das scheint nicht die Art, wie es funktioniert.

proof of concept fiddle

Code-Schnipsel:

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>