place-autocomplete-basic-map

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

HTML

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

<html>
  <head>
    <title>Basic Place Autocomplete map</title>

    <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>
    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
      <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
    </gmp-map>

    <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
    <gmp-place-details-compact
      orientation="horizontal"
      style="
        width: 400px;
        display: none;
        border: none;
        padding: 0;
        margin: 0;
        background-color: transparent;
        color-scheme: light;
      ">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-media lightbox-preferred></gmp-place-media>
      <gmp-place-name></gmp-place-name>
      <gmp-place-rating></gmp-place-rating>
      <gmp-place-type></gmp-place-type>
      <gmp-place-price></gmp-place-price>
     ...

CSS

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

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

gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 30px;
  width: 500px;
  top: 10px;
  left: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  color-scheme: light;
  border-radius: 10px;
}

JavaScript

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

const placeAutocompleteElement = document.querySelector(
  'gmp-basic-place-autocomplete'
);
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');

async function init() {
  // Asynchronously load required libraries from the Google Maps JS API.
  const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
    await Promise.all([
      google.maps.importLibrary('marker'),
      google.maps.importLibrary('maps'),
      google.maps.importLibrary('core'),
      google.maps.importLibrary('places'),
    ]);

  // Get the initial center directly from the gmp-map element's property.
  const center = gmpMapElement.center;

  // Set the initial location bias for the autocomplete element.
  placeAutocompleteElement.locationBias = center;

  // Update the map object with specified options.
  const map = gmpMapElement.innerMap;
  map.setOptions({
    clickableIcons: false,
    mapTypeControl: false,
    streetViewControl: false,
  });

  // Create an advanced marker to show the location of a selected place.
  const advancedMarkerElement = new AdvancedMarkerElement({
    map,
    collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
  });

  // Create an InfoWindow to hold the place details component.
  const infoWindow = new InfoWindow({
    minWidth: 360,
    disableAutoPan: true,
    headerDisabled: true,
    pixelOffset: new Size(0, -10),
  });

  // Event listener for when a place is selected from the autocomplete list.
  placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position =...