CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-places-api
Degsy
Degsy

Reputation: 53

Google Maps API places.url returns "undefined"?

I'm having trouble adding some of Google Places API data types to an info window that will display data when a user clicks on a marker on the map. I have included the following data types place.name, place.rating, place.vacinity and these will successfully display the name, rating, and address of the establishment in the info window. However when I try to add place.url to return the "URL of the official Google page for this place", it returns undefined. These establishments have the URL if I search them via Google so I know that there are URLs however it just cannot access them for some reason?

This is the Javascript code snippet that creates the marker and adds the info window to the listener that will be called when clicked.

    function createMarker(place) {

   infowindow = new google.maps.InfoWindow();
  var placeLoc = place.geometry.location;

  var reportmarker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  markers.push(reportmarker);
  google.maps.event.addListener(reportmarker, 'click', function() {
    infowindow.setContent("<p>" + place.name + "<br />" + place.rating + "<br />" + place.vicinity + "<br />" + place.url+ "<br />" +"</p>");
    infowindow.open(map, this);
  });
}

Upvotes: 0

Views: 1442

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

In your Jsfiddle, you're using nearbySearch() which responses data without url information. You have to use getDetails() to get url.

It isn't very clear from the documentation, but only the PlaceDetails result includes the url.

var map;
var infowindow;

function initMap() {
  var pyrmont = {
    lat: -33.867,
    lng: 151.195
  };

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

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    var service = new google.maps.places.PlacesService(map);
    for (var i = 0; i < results.length; i++) {
      var request = {
        placeId: results[i].place_id
      }
      service.getDetails(request, createMarker)
    }
  } else console.log("nearbySearch:"+status);
}

function createMarker(place, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    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 + ": " + place.rating + ": " + place.url);
      infowindow.open(map, this);
    });
  } else console.log("placeDetails:"+status);
}

$(function() {
  initMap()
})
#map {
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>

Upvotes: 2

Related Questions