Place Details (New)

  • You can fetch detailed information about a place using its Place ID and the Place.fetchFields() method.

  • Specify the desired place data fields (e.g., displayName, formattedAddress) when calling fetchFields().

  • Access the fetched data through the returned Place object.

  • Alternatively, the Place Overview component offers a pre-built UI to display place details.

  • Configure and embed the Place Overview component using the provided configurator for seamless integration.
Select platform: Android iOS JavaScript Web Service
European Economic Area (EEA) developers

Place object

The Place object, which contains information about a place, is dynamically returned by Text Search, Nearby Search, and Place Autocomplete. You can also create a Place object from a place ID or resource name (the resource name is the place ID prefixed with places/). The following snippet shows creating a Place object using a place ID: 

// Use a place ID to create a new Place instance. const place = new Place({  id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo });

You can also create a Place object from a place resource name: 

// Use a place resource name to create a new Place instance. const place = new Place({  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo });

For more information, see PlaceOptions.

Fetch fields

If you have an existing Place object, or a place ID or resource name, use the Place.fetchFields() method to get details about that place. Provide a comma-separated list of place data fields to return; specify field names in camel case. Use the returned Place object to get data for the requested fields.

The following example uses a place ID to create a new Place, calls Place.fetchFields() requesting the displayName and formattedAddress fields, and adds a marker to the map.

TypeScript

async function getPlaceDetails() {  const { Place } = (await google.maps.importLibrary(  'places'  )) as google.maps.PlacesLibrary;  const { AdvancedMarkerElement } = (await google.maps.importLibrary(  'marker'  )) as google.maps.MarkerLibrary;  // Use place ID to create a new Place instance.  const place = new Place({  id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo  });  // Call fetchFields, passing the desired data fields.  await place.fetchFields({  fields: [  'displayName',  'formattedAddress',  'location',  'googleMapsURI',  ],  });  // Add an Advanced Marker  const marker = new AdvancedMarkerElement({  map: innerMap,  position: place.location,  title: place.displayName,  });  // Assemble the info window content.  const content = document.createElement('div');  const address = document.createElement('div');  const placeId = document.createElement('div');  address.textContent = place.formattedAddress || '';  placeId.textContent = place.id;  content.append(placeId, address);  if (place.googleMapsURI) {  const link = document.createElement('a');  link.href = place.googleMapsURI;  link.target = '_blank';  link.textContent = 'View Details on Google Maps';  content.appendChild(link);  }  // Display an info window.  infoWindow.setHeaderContent(place.displayName);  infoWindow.setContent(content);  infoWindow.open({  anchor: marker,  }); }
index.ts

JavaScript

async function getPlaceDetails() {  const { Place } = (await google.maps.importLibrary('places'));  const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));  // Use place ID to create a new Place instance.  const place = new Place({  id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo  });  // Call fetchFields, passing the desired data fields.  await place.fetchFields({  fields: [  'displayName',  'formattedAddress',  'location',  'googleMapsURI',  ],  });  // Add an Advanced Marker  const marker = new AdvancedMarkerElement({  map: innerMap,  position: place.location,  title: place.displayName,  });  // Assemble the info window content.  const content = document.createElement('div');  const address = document.createElement('div');  const placeId = document.createElement('div');  address.textContent = place.formattedAddress || '';  placeId.textContent = place.id;  content.append(placeId, address);  if (place.googleMapsURI) {  const link = document.createElement('a');  link.href = place.googleMapsURI;  link.target = '_blank';  link.textContent = 'View Details on Google Maps';  content.appendChild(link);  }  // Display an info window.  infoWindow.setHeaderContent(place.displayName);  infoWindow.setContent(content);  infoWindow.open({  anchor: marker,  }); }
index.js
Note that Map and Place have been declared prior to this function: 
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
 See the complete example