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.

Place Autocomplete Data Predictions

  • 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 usestoPlace() to convert the first suggestion into a Place object and callsfetchFields() 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 callingfetchAutocompleteSuggestions() for the input"Tadi", then callingtoPlace() on the first prediction result, followed by acall tofetchFields() to get place details.

Read thedocumentation.

TypeScript

/** * Demonstrates making a single request for Place predictions, then requests Place Details for the first result. */asyncfunctioninit(){// @ts-ignoreconst{Place,AutocompleteSessionToken,AutocompleteSuggestion}=awaitgoogle.maps.importLibrary("places")asgoogle.maps.PlacesLibrary;// Add an initial request body.letrequest={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.// @ts-ignorerequest.sessionToken=token;// Fetch autocomplete suggestions.const{suggestions}=awaitAutocompleteSuggestion.fetchAutocompleteSuggestions(request);consttitle=document.getElementById('title')asHTMLElement;title.appendChild(document.createTextNode('Query predictions for "'+request.input+'":'));for(letsuggestionofsuggestions){constplacePrediction=suggestion.placePrediction;// Create a new list element.constlistItem=document.createElement('li');constresultsElement=document.getElementById("results")asHTMLElement;listItem.appendChild(document.createTextNode(placePrediction.text.toString()));resultsElement.appendChild(listItem);}letplace=suggestions[0].placePrediction.toPlace();// Get first predicted place.awaitplace.fetchFields({fields:['displayName','formattedAddress'],});constplaceInfo=document.getElementById("prediction")asHTMLElement;placeInfo.textContent='First predicted place: '+place.displayName+': '+place.formattedAddress;}init();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

/** * Demonstrates making a single request for Place predictions, then requests Place Details for the first result. */asyncfunctioninit(){// @ts-ignoreconst{Place,AutocompleteSessionToken,AutocompleteSuggestion}=awaitgoogle.maps.importLibrary("places");// Add an initial request body.letrequest={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.// @ts-ignorerequest.sessionToken=token;// Fetch autocomplete suggestions.const{suggestions}=awaitAutocompleteSuggestion.fetchAutocompleteSuggestions(request);consttitle=document.getElementById("title");title.appendChild(document.createTextNode('Query predictions for "'+request.input+'":'),);for(letsuggestionofsuggestions){constplacePrediction=suggestion.placePrediction;// Create a new list element.constlistItem=document.createElement("li");constresultsElement=document.getElementById("results");listItem.appendChild(document.createTextNode(placePrediction.text.toString()),);resultsElement.appendChild(listItem);}letplace=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;}init();
Note: The JavaScript is compiled from the TypeScript snippet.

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;}

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>  </head>  <body>    <div></div>    <ul></ul>    <p><span></span></p>    <img           src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"      alt="Powered by Google"    />    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>  </body></html>

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow theseinstructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclone-bsample-place-autocomplete-data-simplehttps://github.com/googlemaps/js-samples.gitcdjs-samplesnpminpmstart

Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.

gitcheckoutsample-SAMPLE_NAMEnpminpmstart

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.