This example shows you how to add a Basic Autocomplete element to a Google map. Read the documentation .
TypeScript
const placeAutocompleteElement = document . querySelector ( 'gmp-basic-place-autocomplete' ) as google . maps . places . PlaceAutocompleteElement ; const placeDetailsElement = document . querySelector ( 'gmp-place-details-compact' ) as any ; const placeDetailsParent = placeDetailsElement . parentElement as HTMLElement ; const gmpMapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; async function initMap () : Promise<void> { // Asynchronously load required libraries from the Google Maps JS API. await google . maps . importLibrary ( 'places' ); const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )) as google . maps . MarkerLibrary ; const { InfoWindow } = ( await google . maps . importLibrary ( 'maps' )) as google . maps . MapsLibrary ; // 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 : google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement ({ map : map , collisionBehavior : google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL , }); // Create an InfoWindow to hold the place details component. const infoWindow : google.maps.InfoWindow = new InfoWindow ({ minWidth : 360 , disableAutoPan : true , headerDisabled : true , pixelOffset : new google . maps . Size ( 0 , - 10 ), }); // Event listener for when a place is selected from the autocomplete list. placeAutocompleteElement . addEventListener ( 'gmp-select' , ( event : any ) = > { // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent . appendChild ( placeDetailsElement ); placeDetailsElement . style . display = 'block' ; advancedMarkerElement . position = null ; infoWindow . close (); // Request details for the selected place. const placeDetailsRequest = placeDetailsElement . querySelector ( 'gmp-place-details-place-request' ) as any ; placeDetailsRequest . place = event . place . id ; }); // Event listener for when the place details have finished loading. placeDetailsElement . addEventListener ( 'gmp-load' , () = > { const location = placeDetailsElement . place . location as google . maps . LatLng ; // Position the marker and open the InfoWindow at the place's location. advancedMarkerElement . position = location ; infoWindow . setContent ( placeDetailsElement ); infoWindow . open ({ map , anchor : advancedMarkerElement , }); map . setCenter ( location ); }); // Event listener to close the InfoWindow when the map is clicked. map . addListener ( 'click' , () : void = > { infoWindow . close (); advancedMarkerElement . position = null ; }); // Event listener for when the map finishes moving (panning or zooming). map . addListener ( 'idle' , () : void = > { const newCenter = map . getCenter () as google . maps . LatLng ; // Update the autocomplete's location bias to a 10km radius around the new map center. placeAutocompleteElement . locationBias = new google . maps . Circle ({ center : { lat : newCenter.lat (), lng : newCenter.lng (), }, radius : 10000 , // 10km in meters. }); }); } initMap ();
JavaScript
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 initMap () { // Asynchronously load required libraries from the Google Maps JS API. await google . maps . importLibrary ( 'places' ); const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )); const { InfoWindow } = ( await google . maps . importLibrary ( 'maps' )); // 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 : map , collisionBehavior : google . maps . 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 google . maps . 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 = null ; infoWindow . close (); // Request details for the selected place. const placeDetailsRequest = placeDetailsElement . querySelector ( 'gmp-place-details-place-request' ); placeDetailsRequest . place = event . place . id ; }); // Event listener for when the place details have finished loading. placeDetailsElement . addEventListener ( 'gmp-load' , () = > { const location = placeDetailsElement . place . location ; // Position the marker and open the InfoWindow at the place's location. advancedMarkerElement . position = location ; infoWindow . setContent ( placeDetailsElement ); infoWindow . open ({ map , anchor : advancedMarkerElement , }); map . setCenter ( location ); }); // Event listener to close the InfoWindow when the map is clicked. map . addListener ( 'click' , () = > { infoWindow . close (); advancedMarkerElement . position = null ; }); // Event listener for when the map finishes moving (panning or zooming). map . addListener ( 'idle' , () = > { const newCenter = map . getCenter (); // Update the autocomplete's location bias to a 10km radius around the new map center. placeAutocompleteElement . locationBias = new google . maps . Circle ({ center : { lat : newCenter . lat (), lng : newCenter . lng (), }, radius : 10000 , // 10km in meters. }); }); } initMap ();
CSS
html , body { height : 100 % ; margin : 0 ; padding : 0 ; } gmp-map { height : 100 % ; } gmp-basic-place-autocomplete { position : absolute ; height : 30 px ; width : 500 px ; top : 10 px ; left : 10 px ; box-shadow : 4 px 4 px 5 px 0 px rgba ( 0 , 0 , 0 , 0.2 ); color-scheme : light ; border-radius : 10 px ; }
HTML
<html> <head> <title>Basic Place Autocomplete map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- 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> </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-standard-content></gmp-place-standard-content> </gmp-place-details-compact> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / place - autocomplete - basic - mapnpm inpm start
