Place Details Elements

  • This documentation details the experimental PlaceDetailsElement for rendering place details on a map.

  • Developers can configure the element using configureFromPlace (place ID or Place object) or configureFromLocation (coordinates).

  • The provided example demonstrates adding PlaceDetailsElement to a map and displaying details based on map clicks.

  • Users can retrieve further place information via the Places API if enabled and by calling place.fetchFields().
Select platform: Android iOS JavaScript

The Place Details Element and Place Details Compact Element are HTML elements that render details for a place:

Place Details Element

Click a marker on the map to see its place details in a Place Details Element.

The PlaceDetailsElement supports a broad range of content elements, including full opening hours, website, phone number, AI-powered summary with fallback to editorial summary, type-specific highlights, reviews, AI-powered review summary, plus code, and feature lists.

To display place details on a map, add a gmp-place-details element to the gmp-map element on the HTML page. Include a child element, gmp-place-details-place-request, to select the place. This can be a Place object, a place ID, or a Place's resource name: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Configure the content

You can control the specific place content displayed by the gmp-place-details element using a nested gmp-place-content-config element to select and configure the place details, as shown in this example: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
            </gmp-place-content-config>
        </gmp-place-details>

The gmp-place-content-config element itself contains a number of child content elements, and each selects a corresponding place detail to display: gmp-place-address selects the place's address, gmp-place-price selects the place's price level, etc. The elements gmp-place-summary and gmp-place-review-summary provide an AI-powered summary of the place and its reviews, respectively. The order of child elements is irrelevant, as the selected details are always rendered in a fixed predefined order.

Some of these elements can be further configured using content-specific attributes:

  • The gmp-place-media element is used to display a single photo, and includes a lightbox-preferred attribute that opens the photo in a lightbox when clicked. Lightbox is disabled by default.
  • The gmp-place-attribution element is used to display the source of the photo. The light-scheme-color and dark-scheme-color attributes are used to set the color of the attribution text in light and dark mode.

See the PlaceContentConfigElement reference documentation for more information about all supported content elements.

For simplicity, the gmp-place-content-config element can be replaced with gmp-place-all-content to show all details available in the Place Details element, or with gmp-place-standard-content to display a standard configuration.

Configure the appearance

The recommended width range for the gmp-place-details element is 250px-400px. Widths less than 250px may not display correctly. Set the height to suit your application. The Place Details element is designed to scroll within the allotted space as needed.

The gmp-place-details element also supports a variety of custom CSS properties to configure the element's colors and fonts. See Places UI Kit Custom Styling for more details.

See the complete code example

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place && placeDetails.place.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js" defer></script>
        <!-- prettier-ignore -->
        <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
              ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <gmp-place-address></gmp-place-address>
                        <gmp-place-rating></gmp-place-rating>
                        <gmp-place-type></gmp-place-type>
                        <gmp-place-price></gmp-place-price>
                        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                        <gmp-place-opening-hours></gmp-place-opening-hours>
                        <gmp-place-website></gmp-place-website>
                        <gmp-place-phone-number></gmp-place-phone-number>
                        <gmp-place-summary></gmp-place-summary>
                        <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                        <gmp-place-review-summary></gmp-place-review-summary>
                        <gmp-place-reviews></gmp-place-reviews>
                        <gmp-place-feature-list></gmp-place-feature-list>
                    </gmp-place-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>
index.html

Try Sample

Place Details Compact Element

Click a marker on the map to see its place details in a Place Details Compact Element.

The PlaceDetailsCompactElement renders details for a selected place using minimal space. This may be useful in an info window highlighting a place on a map, in a social media experience like sharing a location in a chat, as a suggestion for selecting your current location, or within a media article to reference the place on Google Maps. The PlaceDetailsCompactElement can display name, address, rating, type, price, accessibility icon, open status, and a single photo. It can be displayed horizontally or vertically, as selected by the orientation attribute.

In the following snippet, gmp-place-details-compact is configured with orientation set to horizontal. An additional attribute, truncation-preferred, truncates certain content to fit on one line instead of wrapping. The gmp-place-details-compact element contains a child element, gmp-place-details-place-request, to select the place. This can be a Place object, a place ID, or a Place's resource name. 

  <gmp-place-details-compact orientation = "horizontal" truncation-preferred >
    <gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

Configure the content

You can control the specific place content displayed by the gmp-place-details-compact element using a nested gmp-place-content-config element to select and configure the place details, as shown in this snippet: 

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-type></gmp-place-type>
    <gmp-place-price></gmp-place-price>
    <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
    <gmp-place-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>
index.html

The gmp-place-content-config element itself contains a number of child content elements, and each selects a corresponding place detail to display. The order of child elements is irrelevant, as the selected details are always rendered in a fixed predefined order. Some of these elements can be further configured using content-specific attributes.

See the PlaceContentConfigElement reference documentation for more information about all supported content elements.

For simplicity, the gmp-place-content-config element can be replaced with gmp-place-all-content to show all details available in the Place Details Compact element, or with gmp-place-standard-content to display a standard configuration.

Configure the appearance

The recommended width range for the gmp-place-details-compact element in vertical orientation is 180px-300px. Widths less than 160px may not display correctly. Do not set a fixed height.

The recommended width range for the gmp-place-details-compact element in horizontal orientation is 180px-500px. Widths less than 160px may not display correctly. At widths less than 350px, the thumbnail image will not be shown. Do not set a fixed height.

The gmp-place-details-compact element also supports a variety of custom CSS properties to configure the element's colors and fonts. See Places UI Kit Custom Styling for more details.

Note that if the Place Details Compact element is added to an info window, custom styling must be applied directly to the gmp-place-details-compact element. This is because the info window is part of the map's shadow DOM, so external CSS styles will not be applied. 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
index.html

See a complete code example

This example demonstrates adding a PlaceDetailsCompactElement to a map programmatically using an InfoWindow and an AdvancedMarkerElement.

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });
    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior =
        google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });
    const showInfoWindow = () => {
        if (infoWindow.isOpen)
            return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };
    placeDetails.addEventListener('gmp-load', (event) => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        }
        else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js" defer></script>
        <!-- prettier-ignore -->
        <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
              ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>
index.html

Try Sample