Fetch fields
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
async function getPlaceDetails(Place) { 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: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired 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 AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired 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 AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Use the Place Overview component
Note: This sample uses an open source library. See the README for support and feedback related to the library.
Display place details with just a few lines of code using web components.
What are web components?
Web components allow you to create custom, reusable, encapsulated HTML tags that are usable anywhere in the HTML of your web app. They are supported in all modern browsers and expose a framework-agnostic mechanism for encapsulating UI and functionality.
What is the Place Overview component?
The Place Overview component displays detailed information about millions of businesses, including opening hours, star reviews, and photos, plus directions and other actions in a premade UI in 5 sizes and formats.
What is the Extended Component Library?
The Extended Component Library from Google Maps Platform is a set of web components that helps developers build better maps and location features faster, and with less effort. It encapsulates boilerplate code, best practices, and responsive design, reducing complex map interfaces into a single HTML element. Ultimately, these components make it easier to read, learn, customize, and maintain maps and location-related code.
Get Started
To get started, load the Extended Component library with npm.
For best performance, use a package manager and import only the components you need. This package is listed on npm as @googlemaps/extended-component-library. Install it with:
npm i @googlemaps/extended-component-library;
Then import any components you use in your application.
import '@googlemaps/extended-component-library/place_overview.js';
After loading the npm library, get an API Key from the Cloud Console.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>
Use the Place Overview component tag with a Place ID of your choice. This one is a placeholder for a Google office in Auckland.
<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>
There are five size variations of the Place Overview component. The default component uses an x-large
size
variation. In order to get other size variations, add and modify the size
attribute.
<!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" --> <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>
For more details, check out GitHub or npm. To see components used in sample code, check out the examples page on GitHub.