If you have an existing Place object or place ID, 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, 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:'ChIJN5Nz71W3j4ARhx5bwpTQEGg',requestedLanguage:'en',// optional});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});// Log the resultconsole.log(place.displayName);console.log(place.formattedAddress);// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});}
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:'ChIJN5Nz71W3j4ARhx5bwpTQEGg',requestedLanguage:'en',// optional});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});// Log the resultconsole.log(place.displayName);console.log(place.formattedAddress);// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});}
[null,null,["Last updated 2025-08-20 UTC."],[[["\u003cp\u003eYou can fetch detailed information about a place using its Place ID and the \u003ccode\u003ePlace.fetchFields()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eSpecify the desired place data fields (e.g., \u003ccode\u003edisplayName\u003c/code\u003e, \u003ccode\u003eformattedAddress\u003c/code\u003e) when calling \u003ccode\u003efetchFields()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eAccess the fetched data through the returned \u003ccode\u003ePlace\u003c/code\u003e object.\u003c/p\u003e\n"],["\u003cp\u003eAlternatively, the Place Overview component offers a pre-built UI to display place details.\u003c/p\u003e\n"],["\u003cp\u003eConfigure and embed the Place Overview component using the provided configurator for seamless integration.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/details-place \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/details-place \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/place-details \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/places/web-service/place-details \"View this page for the Web Service platform docs.\") \n**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](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](/maps/comms/eea/faq).\n\nFetch fields\n\nIf you have an existing `Place` object or place ID, use the `Place.fetchFields()`\nmethod to get details about that place. Provide a comma-separated list of\n[place data fields](/maps/documentation/javascript/place-class-data-fields) to return;\nspecify field names in camel case. Use the returned `Place` object to get data for the\nrequested fields.\n\n\nThe following example uses a place ID to create a new `Place`, calls `Place.fetchFields()`\nrequesting the `displayName` and `formattedAddress` fields, adds a marker\nto the map, and logs some data to the console. \n\nTypeScript \n\n```typescript\nasync function getPlaceDetails() {\n const { Place } = await google.maps.importLibrary(\"places\") as google.maps.PlacesLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n // Use place ID to create a new Place instance.\n const place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n requestedLanguage: 'en', // optional\n });\n\n // Call fetchFields, passing the desired data fields.\n await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });\n\n // Log the result\n console.log(place.displayName);\n console.log(place.formattedAddress);\n\n // Add an Advanced Marker\n const marker = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n}https://github.com/googlemaps-samples/js-api-samples/blob/29b1d5be457a450848aa288697792a57ab9e3754/dist/samples/place-class/docs/index.ts#L26-L48\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function getPlaceDetails() {\n const { Place } = await google.maps.importLibrary(\"places\");\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n // Use place ID to create a new Place instance.\n const place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n requestedLanguage: 'en', // optional\n });\n // Call fetchFields, passing the desired data fields.\n await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });\n // Log the result\n console.log(place.displayName);\n console.log(place.formattedAddress);\n // Add an Advanced Marker\n const marker = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n}https://github.com/googlemaps-samples/js-api-samples/blob/29b1d5be457a450848aa288697792a57ab9e3754/dist/samples/place-class/docs/index.js#L22-L41\n```\nNote that `Map` and `Place` have been declared prior to this function: \n\n```javascript\nconst { Map } = await google.maps.importLibrary(\"maps\");\nconst { Place } = await google.maps.importLibrary(\"places\");\n```\n[See the complete example](/maps/documentation/javascript/examples/place-class)\n\nUse the Place Overview component\n\nThe Place Overview component displays detailed information about millions of businesses,\nincluding opening hours, star reviews, and photos, plus directions and other\nactions in a premade UI in 5 sizes and formats. It is part of the\n[Extended Component Library](https://github.com/googlemaps/extended-component-library),\nfrom Google Maps Platform, a set of web components that helps developers build better maps\nand location features faster.\n\nUse the [Place Overview configurator](https://configure.mapsplatform.google/place-overview)\nto create embeddable code for a custom Place Overview component, then export\nit to be used with popular frameworks like React and Angular or no framework at all."]]