Google Maps API places.url returns "undefined"?

Question

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);
  });
}

As in you use this code from above and the `place.url` returns a working URL? — Degsy, Apr 11 '18 at 13:23
Where does `place` come from? How are you calling createMarker? Please provide a [mcve] that demonstrates your issue. — geocodezip, Apr 11 '18 at 13:29
@Hikarunomemory do you have any idea why yours works and mine doesn't? — Degsy, Apr 11 '18 at 13:46
@geocodezip if you revert to the documentation provided above (and as far as I know) you will see `place` refers to a place object that is part of the Google Places API library. I didn't include how I called the `createMarker()` because I don't believe this is causing the issue if other `place.x` work correctly. I was working off this example https://jsfiddle.net/mfLt9eac/1/ — Degsy, Apr 11 '18 at 13:52
It isn't very clear from the documentation, but only the [PlaceDetails result](https://developers.google.com/maps/documentation/javascript/places#place_details_responses) includes the url. — geocodezip, Apr 11 '18 at 15:26

score 2 · Accepted Answer · edited Apr 11 '18 at 15:29

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>

the posted code is returning ~11 OVER_QUERY_LIMIT status responses from the `PlaceDetails` requests (added code to log errors) — geocodezip, Apr 11 '18 at 15:30
The OVER_QUERY_LIMIT status seems to be returned from Geocoding API request. [read more](https://stackoverflow.com/questions/45090694/google-places-api-over-query-limit/45119342#45119342) — Hikarunomemory, Apr 11 '18 at 16:07

Google Maps API places.url returns "undefined"?

1 Answers1