Places Search Box

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// 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">
functioninitAutocomplete(){
constmap=newgoogle.maps.Map(
document.getElementById("map")asHTMLElement,
{
center:{lat:-33.8688,lng:151.2195},
zoom:13,
mapTypeId:"roadmap",
}
);
// Create the search box and link it to the UI element.
constinput=document.getElementById("pac-input")asHTMLInputElement;
constsearchBox=newgoogle.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener("bounds_changed",()=>{
searchBox.setBounds(map.getBounds()asgoogle.maps.LatLngBounds);
});
letmarkers:google.maps.Marker[]=[];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed",()=>{
constplaces=searchBox.getPlaces();
if(places.length==0){
return;
}
// Clear out the old markers.
markers.forEach((marker)=>{
marker.setMap(null);
});
markers=[];
// For each place, get the icon, name and location.
constbounds=newgoogle.maps.LatLngBounds();
places.forEach((place)=>{
if(!place.geometry||!place.geometry.location){
console.log("Returned place contains no geometry");
return;
}
consticon={
url:place.iconasstring,
size:newgoogle.maps.Size(71,71),
origin:newgoogle.maps.Point(0,0),
anchor:newgoogle.maps.Point(17,34),
scaledSize:newgoogle.maps.Size(25,25),
};
// Create a marker for each place.
markers.push(
newgoogle.maps.Marker({
map,
icon,
title:place.name,
position:place.geometry.location,
})
);
if(place.geometry.viewport){
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
}else{
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
declareglobal{
interfaceWindow{
initAutocomplete:()=>void;
}
}
window.initAutocomplete=initAutocomplete;
index.ts 

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// 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">
functioninitAutocomplete(){
constmap=newgoogle.maps.Map(document.getElementById("map"),{
center:{lat:-33.8688,lng:151.2195},
zoom:13,
mapTypeId:"roadmap",
});
// Create the search box and link it to the UI element.
constinput=document.getElementById("pac-input");
constsearchBox=newgoogle.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener("bounds_changed",()=>{
searchBox.setBounds(map.getBounds());
});
letmarkers=[];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed",()=>{
constplaces=searchBox.getPlaces();
if(places.length==0){
return;
}
// Clear out the old markers.
markers.forEach((marker)=>{
marker.setMap(null);
});
markers=[];
// For each place, get the icon, name and location.
constbounds=newgoogle.maps.LatLngBounds();
places.forEach((place)=>{
if(!place.geometry||!place.geometry.location){
console.log("Returned place contains no geometry");
return;
}
consticon={
url:place.icon,
size:newgoogle.maps.Size(71,71),
origin:newgoogle.maps.Point(0,0),
anchor:newgoogle.maps.Point(17,34),
scaledSize:newgoogle.maps.Size(25,25),
};
// Create a marker for each place.
markers.push(
newgoogle.maps.Marker({
map,
icon,
title:place.name,
position:place.geometry.location,
}),
);
if(place.geometry.viewport){
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
}else{
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
window.initAutocomplete=initAutocomplete;
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;
}
#description{
font-family:Roboto;
font-size:15px;
font-weight:300;
}
#infowindow-content.title{
font-weight:bold;
}
#infowindow-content{
display:none;
}
#map#infowindow-content{
display:inline;
}
.pac-card{
background-color:#fff;
border:0;
border-radius:2px;
box-shadow:01px4px-1pxrgba(0,0,0,0.3);
margin:10px;
padding:00.5em;
font:40018pxRoboto,Arial,sans-serif;
overflow:hidden;
font-family:Roboto;
padding:0;
}
#pac-container{
padding-bottom:12px;
margin-right:12px;
}
.pac-controls{
display:inline-block;
padding:5px11px;
}
.pac-controlslabel{
font-family:Roboto;
font-size:13px;
font-weight:300;
}
#pac-input{
background-color:#fff;
font-family:Roboto;
font-size:15px;
font-weight:300;
margin-left:12px;
padding:011px013px;
text-overflow:ellipsis;
width:400px;
}
#pac-input:focus{
border-color:#4d90fe;
}
#title{
color:#fff;
background-color:#4d90fe;
font-size:25px;
font-weight:500;
padding:6px12px;
}
#target{
width:345px;
}
style.css 

<html>
 <head>
 <title>Places Search Box</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 </head>
 <body>
 <input
 id="pac-input"
 class="controls"
 type="text"
 placeholder="Search Box"
 />
 <div id="map"></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=initAutocomplete&libraries=places&v=weekly"
 defer
 ></script>
 </body>
</html>
index.html