Migrate to the new Place Details

The Places API can return detailed information about a specific place. This page explains the differences between place details as used in the Place class (new) and PlacesService (legacy), and provides some code snippets for comparison. The following table lists some of the main differences in the use of place details between the Place class and PlacesService:

PlacesService (Legacy) Place (New)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
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.
Place data fields are formatted using snake case. Place data fields are formatted using camel case.
Limited to a fixed set of place types and place data fields. Provides an expanded selection of regularly updated place types and place data fields.

Code comparison

This section compares two similar pieces of code to illustrate the differences between the Places Service and the Place class. The code snippets show the code required on each respective API to make a place details request, and then use the resulting place data to add a marker to the map.

Places Service (Legacy)

The following condensed code snippet shows making a place details request using PlacesService. The request uses a callback, and includes a required conditional check on PlacesServiceStatus. The needed place data fields are specified in the request body.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Learn more

Place class (New)

The following condensed code snippet shows making a place details request using the Place class. The request is asynchronous, and does not include a status check (standard error handling can be used). A place ID is used to create a new Place instance, which is used to make the request (fetchFields()). The needed place data fields are not passed until fetchFields() is called, which lends greater flexibility. Because the fetchFields() method uses the await operator it can only be used inside an async function.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

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

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Learn more