ui-kit-advanced-place-search-text

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 Text Search 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">
      <div class="ui-panel">
        <div class="controls">
          <input
            type="text"
            id="query-input"
            class="query-input"
            placeholder="Search for a place"
            value="cafe" />
          <button class="search-button">Search</button>
        </div>
        <div class="list-container">
          <gmp-advanced-place-search selectable>
            <gmp-place-all-content></gmp-place-all-content>
            <gmp-place-text-search-request
              max-result-count="5"></gmp-place-text-search-request>
          </gmp-advanced-place-search>
        </div>
      </div>
      <!-- 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>

    <!--
        The gmp-advanced-place-details-compact element is styled inline...

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-right: 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;
}

.query-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.search-button {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background-color: #1a73e8;
  color: white;
  border: none;
  cursor: pointer;
}

.search-button:hover,
.search-button:focus-visible {
  background-color: #1765cc;
}

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-text-search-request'
);
const placeDetails = document.querySelector(
  'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');

// 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 query input and place search elements.
  searchButton.addEventListener('click', () => {
    searchPlaces();
  });
  queryInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      searchPlaces();
    }
  });

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

...