ui-kit-place-details-compact

Sample code supporting Google Maps Platform JavaScript API documentation. author(s): Geo Developer IX Documentation Team

HTML

<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<!doctype html>
<html>
  <head>
    <title>Place Details Compact with Google Maps</title>
    <meta charset="utf-8" />
    <script>
      // prettier-ignore
      (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))})({
            });
    </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>
       ...

CSS

/*
 * @license
 * Copyright 2025 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

/* 
 * 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;
}

JavaScript

'use strict';
/*
 * @license
 * Copyright 2025 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

// 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 init() {
  // Request needed libraries.
  void 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 = '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', () => {
    // 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 && placeDetails.place?.location) {
      map.center = marker.position = placeDetails.place.location;
      showInfoWindow();
    }
  });

  // Add an event listener to handle clicks.
  map.innerMap.addListener('click', (event) => {
    event.stop();

    if ('placeId' in event) {
      // When the user clicks a POI.
      marker.position = event.latLng;
      placeDetailsRequest.place = event.placeId;
     ...