Migrate to the new Place Photos

Place photos lets you add high quality photographic content to your web pages. This page explains the differences between place photos features in the Place class (new) and PlacesService (legacy), and provides some code snippets for comparison.

  • PlacesService (legacy) returns an array of up to 10 PlacePhoto objects as part of the PlaceResult object for any getDetails() request if the photos field is specified in the request. In the case of textSearch() and nearbySearch() the first place photo is returned by default if available.
  • The Place class returns an array of up to 10 Photo objects as part of a fetchFields() request if the photos field is specified in the request.

The following table lists some of the main differences in the use of place photos between the Place class and PlacesService:

PlacesService (Legacy) Place (New)
PlacePhoto interface Photo class
PlacePhoto returns html_attributions as a string. Photo returns an AuthorAttribution instance.
Methods require the use of a callback to handle the results object and google.maps.places.PlacesServiceStatus response. Uses Promises, and works asynchronously.
Methods require a PlacesServiceStatus check. No required status check, can use standard error handling.
PlacesService must be instantiated using a map or a div element. Place can be instantiated wherever needed, without a reference to a map or page element.

Code comparison

This section compares code for place photos to illustrate the differences between the Places Service and the Place class. The code snippets show the code required to request place photos on each respective API.

Places service (legacy)

The following snippet shows returning photos using PlacesService, and displaying the first photo result on the page. In this example, the place details request specifies a place ID, along with the name and photos fields. The first photo is then displayed on the page after checking service status. When instantiating the PlacesService, a map or a div element must be specified; since this example does not feature a map, a div element is used.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Author attributions in PlacesService

The PlacesService returns the required author attributions as an html_attributions string containing a URL pointing to the author's Google profile page. The following snippet shows retrieving attribution data for the first photo result.

let attributionUrl = place.photos[0].html_attributions;

Learn more

Place class (new)

The following snippet shows using the fetchFields() method to return place details including the display name and place photos. First a new Place object is instantiated using a place ID, followed by a call to fetchFields() where the displayName and photos fields are specified. The first place photo is then displayed on the page. There is no need to check service status when using the Place class, as this is handled automatically.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Author attributions in the Place class

The Place class returns author attributions as an AuthorAttribution instance including the author's name, a URI for the author's Google profile page, and a URI for the author's profile photo. The following snippet shows retrieving attribution data for the first photo result.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Learn more