Google Maps JavaScript Places API - URL undefined

Question

I am integrating the Google Maps API into a website I am working on. For the most part, it performs as desired; however, when making a call to the nearbySearch service, I am having difficulty getting the url (to the Google Maps page for the location) returned. According to my understanding of the Google documentation, this call returns a PlaceResult object with various properties, including url.I am able to access two other properties, name and vicinity, properly, but the url property is coming back as undefined. What might the issue be? Thanks.

The relevant code snippet:

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;



  } 
}

For reference:

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

Answer 1

It looks like that property isn't available in the PlaceResult returned in the nearbySearch query. A details request on the placeIds from the results returned by that query, returns results with that property available.

Per my reading of the documentation, the only query that should return a "limited" PlaceResult is radarSearch , but that doesn't seem to be the way it is working.

proof of concept fiddle

code snippet:

 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>