Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Place Autocomplete Data Predictions

Spark icon

Page Summary

This example shows how to use the Place Autocomplete Data API to get place predictions for a given input and retrieve place details for the first prediction.
The sample code demonstrates fetching autocomplete suggestions for the input "Tadi", restricting the search to restaurants in a specific area.
It then uses toPlace() to convert the first suggestion into a Place object and calls fetchFields() to get details like name and address.
The example provides code snippets in both TypeScript and JavaScript, along with HTML and CSS for displaying the results.

This example demonstrates calling fetchAutocompleteSuggestions() for the input "Tadi", then calling toPlace() on the first prediction result, followed by a call to fetchFields() to get place details.

Read the documentation.

[フレーム]

TypeScript

asyncfunctioninit(){
const{AutocompleteSessionToken,AutocompleteSuggestion}=
awaitgoogle.maps.importLibrary('places');
// Add an initial request body.
constrequest:google.maps.places.AutocompleteRequest={
input:'Tadi',
locationRestriction:{
west:-122.44,
north:37.8,
east:-122.39,
south:37.78,
},
origin:{lat:37.7893,lng:-122.4039},
includedPrimaryTypes:['restaurant'],
language:'en-US',
region:'us',
};
// Create a session token.
consttoken=newAutocompleteSessionToken();
// Add the token to the request.
request.sessionToken=token;
// Fetch autocomplete suggestions.
const{suggestions}=
awaitAutocompleteSuggestion.fetchAutocompleteSuggestions(request);
consttitle=document.getElementById('title')!;
title.appendChild(
document.createTextNode(
'Query predictions for "'+request.input+'":'
)
);
constresultsElement=document.getElementById('results')!;
for(constsuggestionofsuggestions){
constplacePrediction=suggestion.placePrediction;
// Create a new list element.
constlistItem=document.createElement('li');
listItem.appendChild(
document.createTextNode(placePrediction!.text.toString())
);
resultsElement.appendChild(listItem);
}
constplace=suggestions[0].placePrediction!.toPlace();// Get first predicted place.
awaitplace.fetchFields({
fields:['displayName','formattedAddress'],
});
constplaceInfo=document.getElementById('prediction')!;
placeInfo.textContent=`First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}
voidinit();index.ts

JavaScript

asyncfunctioninit(){
const{AutocompleteSessionToken,AutocompleteSuggestion}=
awaitgoogle.maps.importLibrary('places');
// Add an initial request body.
constrequest={
input:'Tadi',
locationRestriction:{
west:-122.44,
north:37.8,
east:-122.39,
south:37.78,
},
origin:{lat:37.7893,lng:-122.4039},
includedPrimaryTypes:['restaurant'],
language:'en-US',
region:'us',
};
// Create a session token.
consttoken=newAutocompleteSessionToken();
// Add the token to the request.
request.sessionToken=token;
// Fetch autocomplete suggestions.
const{suggestions}=
awaitAutocompleteSuggestion.fetchAutocompleteSuggestions(request);
consttitle=document.getElementById('title');
title.appendChild(
document.createTextNode(
'Query predictions for "'+request.input+'":'
)
);
constresultsElement=document.getElementById('results');
for(constsuggestionofsuggestions){
constplacePrediction=suggestion.placePrediction;
// Create a new list element.
constlistItem=document.createElement('li');
listItem.appendChild(
document.createTextNode(placePrediction.text.toString())
);
resultsElement.appendChild(listItem);
}
constplace=suggestions[0].placePrediction.toPlace();// Get first predicted place.
awaitplace.fetchFields({
fields:['displayName','formattedAddress'],
});
constplaceInfo=document.getElementById('prediction');
placeInfo.textContent=`First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}
voidinit();index.js

CSS

/* 
 * 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;
}
style.css

HTML

<html>
 <head>
 <title>Place Autocomplete Data API Predictions</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <div id="title"></div>
 <ul id="results"></ul>
 <p><span id="prediction"></span></p>
 <img
 class="powered-by-google"
 src="./powered_by_google_on_white.png"
 alt="Powered by Google" />
 </body>
</html>index.html

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.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/place-autocomplete-data-simple
npmi
npmstart