Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Place Details (New)

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

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

  • Access the fetched data through the returnedPlace 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.

European Economic Area (EEA) developers If your billing address is in the European Economic Area, effective on 8 July 2025, the Google Maps Platform EEA Terms of Service will apply to your use of the Services. Functionality varies by region.Learn more.

Fetch fields

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

The following example uses a place ID to create a newPlace, callsPlace.fetchFields() requesting thedisplayName andformattedAddress fields, adds a marker to the map, and logs some data to the console.

TypeScript

asyncfunctiongetPlaceDetails(){const{Place}=awaitgoogle.maps.importLibrary("places")asgoogle.maps.PlacesLibrary;const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;// Use place ID to create a new Place instance.constplace=newPlace({id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location','googleMapsURI']});// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map:innerMap,position:place.location,title:place.displayName,});// Assemble the info window content.constcontent=document.createElement('div');constaddress=document.createElement('div');constplaceId=document.createElement('div');address.textContent=place.formattedAddress||'';placeId.textContent=place.id;content.append(placeId,address);if(place.googleMapsURI){constlink=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,});}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

asyncfunctiongetPlaceDetails(){const{Place}=awaitgoogle.maps.importLibrary("places");const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");// Use place ID to create a new Place instance.constplace=newPlace({id:'ChIJyYB_SZVU2YARR-I1Jjf08F0',// San Diego Zoo});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location','googleMapsURI']});// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map:innerMap,position:place.location,title:place.displayName,});// Assemble the info window content.constcontent=document.createElement('div');constaddress=document.createElement('div');constplaceId=document.createElement('div');address.textContent=place.formattedAddress||'';placeId.textContent=place.id;content.append(placeId,address);if(place.googleMapsURI){constlink=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,});}
Note thatMap andPlace have been declared prior to this function:
const{Map}=awaitgoogle.maps.importLibrary("maps");const{Place}=awaitgoogle.maps.importLibrary("places");
See the complete example

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.