Where do I retrieve the photo_reference value to make a Google Places Photos request?

Question

From Google's Place Photos documentation I should be able to retrieve a photo_reference key from making a request to their nearby search, radar, or place details services.

I'm hitting their place details service, and I'm receiving an array of photos with 10 elements, but these elements only contain the height, width, and html_attribution keys. Am I missing something here or has their API changed without updating their documentation?

Here's my request to place details, where place is the response:

export function placeDetailsFetchData(placeId) {
  return (dispatch) => {
    const request = { placeId };
    const service = new google.maps.places.PlacesService(document.createElement('div'));

    service.getDetails(request, (place, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        dispatch({
          type: PLACE_DETAILS_FETCH_DATA_SUCCESS,
          place
        });
      } else {
        dispatch(placeDetailsHasErrored(true));
      }
    });
  }
}

Here's the photos value in the response:

[
  {
    "height": 3024,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/109733975839515761188/photos\">Chris Bair</a>"
    ],
    "width": 4032
  },
  {
    "height": 2992,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/100217631342523519461/photos\">Samir Soriano</a>"
    ],
    "width": 4000
  },
  {
    "height": 453,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/106775786962992563502/photos\">Frisco Fried</a>"
    ],
    "width": 604
  },
  {
    "height": 5312,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/111414489430298948350/photos\">Tu Lam</a>"
    ],
    "width": 2988
  },
  {
    "height": 1920,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/109551371558914502695/photos\">Kenny Reed</a>"
    ],
    "width": 2560
  },
  {
    "height": 4160,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/110844988640416794228/photos\">Vicious V</a>"
    ],
    "width": 3120
  },
  {
    "height": 2576,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/103079141129202103200/photos\">Romayne Ward</a>"
    ],
    "width": 1932
  },
  {
    "height": 5312,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/103167182117207780142/photos\">Michael C</a>"
    ],
    "width": 2988
  },
  {
    "height": 1836,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/116997882870097389214/photos\">Sam Johnson</a>"
    ],
    "width": 3264
  },
  {
    "height": 4032,
    "html_attributions": [
      "<a href=\"https://maps.google.com/maps/contrib/113862636441079805689/photos\">Wes Wu</a>"
    ],
    "width": 3024
  }
]

Answer 1

The google.maps.places.PlacePhoto object provides the method getUrl() that returns URL of the place photo. Use this method to get the URL of image, Maps JavaScript API doesn't expose a photo reference.

Have a look at documentation for further details:

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

place.photos.forEach(function (placePhoto) {
    var url = placePhoto.getUrl({
        maxWidth: 600,
        maxHeight: 400
    });
});