<br />

**European Economic Area (EEA) developers**

> [!NOTE]
> If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](https://developers.google.com/maps/comms/eea/faq.md.txt).

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`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#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`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#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`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt) (Legacy) | [`Place`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt) (New) |
|---|---|
| [`PlacePhoto`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacePhoto) interface | [`Photo`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Photo) class |
| `PlacePhoto` returns [`html_attributions`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacePhoto.html_attributions) as a string. | `Photo` returns an [`AuthorAttribution`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#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. [Learn more](https://developers.google.com/maps/documentation/javascript/reference/errors.md.txt). |
| `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.

```javascript
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`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacePhoto.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.

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

#### Learn more

- [See the documentation](https://developers.google.com/maps/documentation/javascript/places#places_photos)
- [`getDetails` reference](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacesService.getDetails)
- [`PlacePhoto` interface reference](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacePhoto)

### Place class (new)

The following snippet shows using the
[`fetchFields()`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Place.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.

```javascript
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`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#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.

```javascript
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

- [See the full example](https://developers.google.com/maps/documentation/javascript/examples/place-photos.md.txt)
- [See the documentation](https://developers.google.com/maps/documentation/javascript/place-photos.md.txt)
- [`fetchFields()` reference](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Place.fetchFields)
- [`Photo` class reference](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Photo)