Place Autocomplete

let map: google.maps.Map; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap(): Promise<void> {     // Request needed libraries.     //@ts-ignore     const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([         google.maps.importLibrary("marker"),         google.maps.importLibrary("places")       ]);      // Initialize the map.     map = new google.maps.Map(document.getElementById('map') as HTMLElement, {         center,         zoom: 13,         mapId: '4504f8b37365c3d0',         mapTypeControl: false,     });     //@ts-ignore     const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();     //@ts-ignore     placeAutocomplete.id = 'place-autocomplete-input';     placeAutocomplete.locationBias = center;      const card = document.getElementById('place-autocomplete-card') as HTMLElement;     //@ts-ignore     card.appendChild(placeAutocomplete);     map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);      // Create the marker and infowindow.     marker = new google.maps.marker.AdvancedMarkerElement({         map,     });      infoWindow = new google.maps.InfoWindow({});      // Add the gmp-placeselect listener, and display the results on the map.     //@ts-ignore     placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {         const place = placePrediction.toPlace();         await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });          // If the place has a geometry, then present it on a map.         if (place.viewport) {             map.fitBounds(place.viewport);         } else {             map.setCenter(place.location);             map.setZoom(17);         }          let content = '<div id="infowindow-content">' +         '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +         '<span id="place-address">' + place.formattedAddress + '</span>' +         '</div>';          updateInfoWindow(content, place.location);         marker.position = place.location;     }); }  // Helper function to create an info window. function updateInfoWindow(content, center) {     infoWindow.setContent(content);     infoWindow.setPosition(center);     infoWindow.open({         map,         anchor: marker,         shouldFocus: false,     }); }  initMap();
index.ts

let map; let marker; let infoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap() {     // Request needed libraries.     //@ts-ignore     const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([         google.maps.importLibrary("marker"),         google.maps.importLibrary("places")     ]);     // Initialize the map.     map = new google.maps.Map(document.getElementById('map'), {         center,         zoom: 13,         mapId: '4504f8b37365c3d0',         mapTypeControl: false,     });     //@ts-ignore     const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();     //@ts-ignore     placeAutocomplete.id = 'place-autocomplete-input';     placeAutocomplete.locationBias = center;     const card = document.getElementById('place-autocomplete-card');     //@ts-ignore     card.appendChild(placeAutocomplete);     map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);     // Create the marker and infowindow.     marker = new google.maps.marker.AdvancedMarkerElement({         map,     });     infoWindow = new google.maps.InfoWindow({});     // Add the gmp-placeselect listener, and display the results on the map.     //@ts-ignore     placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {         const place = placePrediction.toPlace();         await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });         // If the place has a geometry, then present it on a map.         if (place.viewport) {             map.fitBounds(place.viewport);         }         else {             map.setCenter(place.location);             map.setZoom(17);         }         let content = '<div id="infowindow-content">' +             '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +             '<span id="place-address">' + place.formattedAddress + '</span>' +             '</div>';         updateInfoWindow(content, place.location);         marker.position = place.location;     }); } // Helper function to create an info window. function updateInfoWindow(content, center) {     infoWindow.setContent(content);     infoWindow.setPosition(center);     infoWindow.open({         map,         anchor: marker,         shouldFocus: false,     }); } initMap();
index.js

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; }  #place-autocomplete-card {   background-color: #fff;   border-radius: 5px;   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;   margin: 10px;   padding: 5px;   font-family: Roboto, sans-serif;   font-size: large;   font-weight: bold; }  gmp-place-autocomplete {   width: 300px; }  #infowindow-content .title {   font-weight: bold; }  #map #infowindow-content {   display: inline; } 
style.css

<html>   <head>     <title>Place Autocomplete map</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div class="place-autocomplete-card" id="place-autocomplete-card">       <p>Search for a place here:</p>     </div>     <div id="map"></div>      <!-- 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>   </body> </html>
index.html