ui-kit-advanced-place-search-nearby

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

HTML

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

<!doctype html>
<html>
  <head>
    <title>Place Search Nearby 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))})({
                v: "beta"
            });
    </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 center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
      </gmp-map>
      <div class="ui-panel">
        <div class="controls">
          <label for="type-select">
            Select a place type:
            <select id="type-select" class="type-select">
              <option value="restaurant">Restaurant</option>
              <option value="cafe" selected>Cafe</option>
              <option value="electric_vehicle_charging_station">
                EV charging station
              </option>
            </select>
          </label>
        </div>
        <div class="list-container">
          <gmp-advanced-place-search selectable>
            <gmp-place-all-content></gmp-place-all-content>
            <gmp-place-nearby-search-request
             ...

CSS

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

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

gmp-map {
  flex-grow: 1;
}

.ui-panel {
  width: 400px;
  margin-left: 20px;
  margin-top: 10px;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
}

.list-container {
  display: flex;
  flex-direction: column;
}

gmp-place-search {
  width: 100%;
  margin: 0;
  border: none;
  color-scheme: light;
}

JavaScript

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

// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-advanced-place-search');
const placeSearchQuery = document.querySelector(
  'gmp-place-nearby-search-request'
);
const placeDetails = document.querySelector(
  'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const typeSelect = document.querySelector('.type-select');

// Global variables for the map, markers, and info window.
const markers = new Map();
let infoWindow;

// The init function is called when the page loads.
async function init() {
  // Import the necessary libraries from the Google Maps API.
  const [{ InfoWindow }] = await Promise.all([
    google.maps.importLibrary('maps'),
    google.maps.importLibrary('places'),
  ]);

  // Create a new info window and set its content to the place details element.
  placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
  infoWindow = new InfoWindow({
    content: placeDetails,
    ariaLabel: 'Place Details',
  });

  // Set the map options.
  map.innerMap.setOptions({
    clickableIcons: false,
    mapTypeControl: false,
    streetViewControl: false,
  });

  // Add event listeners to the type select and place search elements.
  typeSelect.addEventListener('change', () => {
    searchPlaces();
  });

  placeSearch.addEventListener('gmp-select', (event) => {
    const place = event.place;
    if (place?.id) {
      markers.get(place.id)?.click();
    }
  });
  placeSearch.addEventListener('gmp-load', () => {
    void addMarkers();
  });

  searchPlaces();
}

// The searchPlaces function is called when the user changes the type select or when the page loads.
function searchPlaces() {
  // Close the info window and...