// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:{lat:40.749933,lng:-73.98633},zoom:13,mapTypeControl:false,});constcard=document.getElementById("pac-card")asHTMLElement;constinput=document.getElementById("pac-input")asHTMLInputElement;constbiasInputElement=document.getElementById("use-location-bias")asHTMLInputElement;conststrictBoundsInputElement=document.getElementById("use-strict-bounds")asHTMLInputElement;constoptions={fields:["formatted_address","geometry","name"],strictBounds:false,};map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);constautocomplete=newgoogle.maps.places.Autocomplete(input,options);// Bind the map's bounds (viewport) property to the autocomplete object,// so that the autocomplete requests use the current map bounds for the// bounds option in the request.autocomplete.bindTo("bounds",map);constinfowindow=newgoogle.maps.InfoWindow();constinfowindowContent=document.getElementById("infowindow-content")asHTMLElement;infowindow.setContent(infowindowContent);constmarker=newgoogle.maps.Marker({map,anchorPoint:newgoogle.maps.Point(0,-29),});autocomplete.addListener("place_changed",()=>{infowindow.close();marker.setVisible(false);constplace=autocomplete.getPlace();if(!place.geometry||!place.geometry.location){// User entered the name of a Place that was not suggested and// pressed the Enter key, or the Place Details request failed.window.alert("No details available for input: '"+place.name+"'");return;}// If the place has a geometry, then present it on a map.if(place.geometry.viewport){map.fitBounds(place.geometry.viewport);}else{map.setCenter(place.geometry.location);map.setZoom(17);}marker.setPosition(place.geometry.location);marker.setVisible(true);infowindowContent.children["place-name"].textContent=place.name;infowindowContent.children["place-address"].textContent=place.formatted_address;infowindow.open(map,marker);});// Sets a listener on a radio button to change the filter type on Places// Autocomplete.functionsetupClickListener(id,types){constradioButton=document.getElementById(id)asHTMLInputElement;radioButton.addEventListener("click",()=>{autocomplete.setTypes(types);input.value="";});}setupClickListener("changetype-all",[]);setupClickListener("changetype-address",["address"]);setupClickListener("changetype-establishment",["establishment"]);setupClickListener("changetype-geocode",["geocode"]);setupClickListener("changetype-cities",["(cities)"]);setupClickListener("changetype-regions",["(regions)"]);biasInputElement.addEventListener("change",()=>{if(biasInputElement.checked){autocomplete.bindTo("bounds",map);}else{// User wants to turn off location bias, so three things need to happen:// 1. Unbind from map// 2. Reset the bounds to whole world// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)autocomplete.unbind("bounds");autocomplete.setBounds({east:180,west:-180,north:90,south:-90});strictBoundsInputElement.checked=biasInputElement.checked;}input.value="";});strictBoundsInputElement.addEventListener("change",()=>{autocomplete.setOptions({strictBounds:strictBoundsInputElement.checked,});if(strictBoundsInputElement.checked){biasInputElement.checked=strictBoundsInputElement.checked;autocomplete.bindTo("bounds",map);}input.value="";});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
index.ts

// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:40.749933,lng:-73.98633},zoom:13,mapTypeControl:false,});constcard=document.getElementById("pac-card");constinput=document.getElementById("pac-input");constbiasInputElement=document.getElementById("use-location-bias");conststrictBoundsInputElement=document.getElementById("use-strict-bounds");constoptions={fields:["formatted_address","geometry","name"],strictBounds:false,};map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);constautocomplete=newgoogle.maps.places.Autocomplete(input,options);// Bind the map's bounds (viewport) property to the autocomplete object,// so that the autocomplete requests use the current map bounds for the// bounds option in the request.autocomplete.bindTo("bounds",map);constinfowindow=newgoogle.maps.InfoWindow();constinfowindowContent=document.getElementById("infowindow-content");infowindow.setContent(infowindowContent);constmarker=newgoogle.maps.Marker({map,anchorPoint:newgoogle.maps.Point(0,-29),});autocomplete.addListener("place_changed",()=>{infowindow.close();marker.setVisible(false);constplace=autocomplete.getPlace();if(!place.geometry||!place.geometry.location){// User entered the name of a Place that was not suggested and// pressed the Enter key, or the Place Details request failed.window.alert("No details available for input: '"+place.name+"'");return;}// If the place has a geometry, then present it on a map.if(place.geometry.viewport){map.fitBounds(place.geometry.viewport);}else{map.setCenter(place.geometry.location);map.setZoom(17);}marker.setPosition(place.geometry.location);marker.setVisible(true);infowindowContent.children["place-name"].textContent=place.name;infowindowContent.children["place-address"].textContent=place.formatted_address;infowindow.open(map,marker);});// Sets a listener on a radio button to change the filter type on Places// Autocomplete.functionsetupClickListener(id,types){constradioButton=document.getElementById(id);radioButton.addEventListener("click",()=>{autocomplete.setTypes(types);input.value="";});}setupClickListener("changetype-all",[]);setupClickListener("changetype-address",["address"]);setupClickListener("changetype-establishment",["establishment"]);setupClickListener("changetype-geocode",["geocode"]);setupClickListener("changetype-cities",["(cities)"]);setupClickListener("changetype-regions",["(regions)"]);biasInputElement.addEventListener("change",()=>{if(biasInputElement.checked){autocomplete.bindTo("bounds",map);}else{// User wants to turn off location bias, so three things need to happen:// 1. Unbind from map// 2. Reset the bounds to whole world// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)autocomplete.unbind("bounds");autocomplete.setBounds({east:180,west:-180,north:90,south:-90});strictBoundsInputElement.checked=biasInputElement.checked;}input.value="";});strictBoundsInputElement.addEventListener("change",()=>{autocomplete.setOptions({strictBounds:strictBoundsInputElement.checked,});if(strictBoundsInputElement.checked){biasInputElement.checked=strictBoundsInputElement.checked;autocomplete.bindTo("bounds",map);}input.value="";});}window.initMap=initMap;
index.js

<html>  <head>    <title>Place Autocomplete</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div>      <div>        <div>Autocomplete search</div>        <div>          <input            type="radio"            name="type"                       checked="checked"          />          <label for="changetype-all">All</label>          <input type="radio" name="type" />          <label for="changetype-establishment">establishment</label>          <input type="radio" name="type" />          <label for="changetype-address">address</label>          <input type="radio" name="type" />          <label for="changetype-geocode">geocode</label>          <input type="radio" name="type" />          <label for="changetype-cities">(cities)</label>          <input type="radio" name="type" />          <label for="changetype-regions">(regions)</label>        </div>        <br />        <div>          <input type="checkbox" value="" checked />          <label for="use-location-bias">Bias to map viewport</label>          <input type="checkbox" value="" />          <label for="use-strict-bounds">Strict bounds</label>        </div>      </div>      <div>        <input type="text" placeholder="Enter a location" />      </div>    </div>    <div></div>    <div>      <span></span><br />      <span></span>    </div>    <!--       The `defer` attribute causes the script to execute after the full HTML      document has been parsed. For non-blocking uses, avoiding race conditions,      and consistent behavior across browsers, consider loading using Promises. See      https://developers.google.com/maps/documentation/javascript/load-maps-js-api      for more information.      -->    <script      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=weekly"      defer    ></script>  </body></html>
index.html