CODEWITHSUNDEEP
javascriptgoogle-maps
KellyM
KellyM

Reputation: 2522

Google Maps JavaScript Places API - URL undefined

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

Upvotes: 0

Views: 770

Answers (1)

geocodezip
geocodezip

Reputation: 161324

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>

Upvotes: 1

Related Questions