Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Basic Place Autocomplete Element

Select platform:AndroidiOSJavaScript

TheBasicPlaceAutocompleteElement creates a text input field, supplies place predictions in a UI pick list, and returns a place ID for the selected place.

The Basic Place Autocomplete element is simpler to implement than thePlaceAutocompleteElement, and it differs in the following ways:

  • The Basic Place Autocomplete element returns aPlace object containing only theplace ID, rather than aPlacePrediction object. You can use the returned place ID directly with aPlaces UI Kit Details element to get additional place details, whereas aPlacePrediction object would first require conversion to a place ID.
  • The Basic Place Autocomplete element does not require you to enable the Places API in Google Cloud Console.
  • The Basic Place Autocomplete element clears the input field when a user selects a place prediction.

Prerequisites

To use the Basic Place Autocomplete element, you must enable the Places UI Kit on your Google Cloud project. See Get started for details.

Note: The Basic Place Autocomplete element is billed using theSKU: Places UI Kit - Autocomplete per Session,not the standard Autocomplete request or Autocomplete session SKUs.

Add a Basic Place Autocomplete element

This section shows you how to add a Basic Autocomplete element to a web page or map.

Add a Basic Autocomplete element to a web page

To add the BasicAutocomplete element to a web page, create a newgoogle.maps.places.BasicPlaceAutocompleteElement, and append it to the page as shown in the following example:

// Request needed libraries.const{BasicPlaceAutocompleteElement}=awaitgoogle.maps.importLibrary('places');// Create the input HTML element and append it.constplaceAutocomplete=newBasicPlaceAutocompleteElement();document.body.appendChild(placeAutocomplete);

Add a Basic Autocomplete element to a map

To add a Basic Autocomplete element to a map, append aBasicPlaceAutocompleteElement to agmp-map element and set its position using theslot attribute, as shown in the following example:

<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>
Note:Themap ID attribute allows map styling and configuration settings to be stored in Google Cloud, and is required for this example. The IDDEMO_MAP_ID can be used for testing and does not need to be enabled in Cloud.

Constrain Autocomplete predictions

By default, Basic Place Autocomplete presents all place types, biased for predictions near the user's location. SetBasicPlaceAutocompleteElementOptions to present more relevant predictions by restricting or biasing results.

Restricting results causes the Basic Autocomplete element to ignore any results that are outside the restriction area. A common practice is to restrict results to the map bounds. Biasing results makes the BasicAutocomplete element show results within the specified area, but some matches may be outside of that area.

If you don't supply any bounds or a map viewport, the API will attempt to detect the user's location from their IP address, and will bias the results to that location. Set bounds whenever possible. Otherwise, different users may receive different predictions. Also, to generally improve predictions it is important to provide a sensible viewport, such as one that you set by panning or zooming on the map, or a developer-set viewport based on device location and radius. When a radius is not available, 5km is considered a sensible default for the Basic Place Autocomplete element. Don't set a viewport with zero radius (a single point), a viewport that is only a few meters across (less than 100m.), or a viewport that spans the globe.

Restrict place search by country

To restrict place search to one or more specific countries, use theincludedRegionCodes property to specify the country code(s) as shown in the following snippet:

constpac=newgoogle.maps.places.BasicPlaceAutocompleteElement({includedRegionCodes:['us','au'],});

Restrict place search to map bounds

To restrict place search to a map's bounds, use thelocationRestrictions property to add the bounds, as shown in the following snippet:

constpac=newgoogle.maps.places.BasicPlaceAutocompleteElement({locationRestriction:map.getBounds(),});

When restricting to map bounds, be sure to add a listener to update the bounds when they change:

map.addListener('bounds_changed',()=>{autocomplete.locationRestriction=map.getBounds();});

To remove thelocationRestriction, set it tonull.

Bias place search results

Bias place search results to a circle area by using thelocationBias property, and passing a radius, as shown here:

constautocomplete=newgoogle.maps.places.BasicPlaceAutocompleteElement({locationBias:{radius:100,center:{lat:50.064192,lng:-130.605469}},});

To remove thelocationBias, set it tonull.

Restrict place search results to certain types

Restrict place search results to certain types of places by using theincludedPrimaryTypes property, and specifying one or more types, as shown here:

constautocomplete=newgoogle.maps.places.BasicPlaceAutocompleteElement({includedPrimaryTypes:['establishment'],});

For a complete list of supported types, seePlace type tables A and B.

Configure the Place Request element

Add a listener to update the Place Request element when the user selects a prediction:

// 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.constplaceDetailsRequest=placeDetailsElement.querySelector('gmp-place-details-place-request');placeDetailsRequest.place=event.place.id;});

This example shows you how to add a Basic Autocomplete element to a Google map.

JavaScript

constplaceAutocompleteElement=document.querySelector('gmp-basic-place-autocomplete');constplaceDetailsElement=document.querySelector('gmp-place-details-compact');constplaceDetailsParent=placeDetailsElement.parentElement;constgmpMapElement=document.querySelector('gmp-map');asyncfunctioninitMap(){// Asynchronously load required libraries from the Google Maps JS API.awaitgoogle.maps.importLibrary('places');const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary('marker'));const{InfoWindow}=(awaitgoogle.maps.importLibrary('maps'));// Get the initial center directly from the gmp-map element's property.constcenter=gmpMapElement.center;// Set the initial location bias for the autocomplete element.placeAutocompleteElement.locationBias=center;// Update the map object with specified options.constmap=gmpMapElement.innerMap;map.setOptions({clickableIcons:false,mapTypeControl:false,streetViewControl:false,});// Create an advanced marker to show the location of a selected place.constadvancedMarkerElement=newAdvancedMarkerElement({map:map,collisionBehavior:google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,});// Create an InfoWindow to hold the place details component.constinfoWindow=newInfoWindow({minWidth:360,disableAutoPan:true,headerDisabled:true,pixelOffset:newgoogle.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.constplaceDetailsRequest=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',()=>{constlocation=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',()=>{constnewCenter=map.getCenter();// Update the autocomplete's location bias to a 10km radius around the new map center.placeAutocompleteElement.locationBias=newgoogle.maps.Circle({center:{lat:newCenter.lat(),lng:newCenter.lng(),},radius:10000,// 10km in meters.});});}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

CSS

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:4px4px5px0pxrgba(0,0,0,0.2);color-scheme:light;border-radius:10px;}

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"     >      <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

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.