How to add a Place Autocomplete search widget to your website

In this episode of Geocasts, learn how to add a Place Autocomplete search bar to a webpage with the client-side Maps JavaScript API. With Place Autocomplete, Google Maps Platform does a place-specific autocomplete when you are typing into the search bar. Developers can build Place Autocomplete functionality into any input text field to make it a search bar that helpfully provides on-the-fly predictions for your users as they type.

Alternate version for Android:

#Geocasts #PlaceAutocomplete

[KG-ckhb]

The documentation doesn't have enough code-samples, thank you for this.

[dr_unstoppable]

Great video!
I'm eager to use this on my site.
Will I need to rewrite my backend in node.js or can I still use PHP?

[coreartalex]

Thanks, your video was super helpful. You rock

[Karen-ybso]

this was amazing!!! was super helpful for my coding project ♥

[to-gobox]

Thanks for this helpful video. I'm struggling to find documentation on the 'fields' parameter that can be seen at 1:50. Can you direct me to where I can read about that?

[profitusmaximus]

Hello,

I am using one field for "Street and house number." However, when a customer enters their address using the autocomplete suggestion, the house number appears before the street name. In Germany, however, the street name is listed first, followed by the house number. How can I change this?

[staspechenyi]

Is there any possibility of showing the message "no results found" on an empty response?

[hyang]

i try to use autocomplete api, but place_change not work.

[grimcity]

How can I get this to work on a map with a KML layer? My search box autocompletes, but upon hitting the enter button it doesn't do anything.

[kalelkar]

Is there a way to force the user to select an home address. For example: Lets say there is a street called: Mayfair Street, London, LD1 0DN which has 10 houses from 1 - 10.

Now if the user types "Mayfair Street", then I want the individual to select one of the Houses in the list rather than just Mayfair Street, London, LD1 0DN

[norayrghukasyan]

I can't retrieve the address and postal code with a single request. Why ?

[neonode]

Imagine asking for a pizza in new york and get a t-shirt 🍕

[dyls-qyor]

How do I set radius to miles instead of km?

[tiagocostarebelo]

Thanks for this. Also, the link mentioned in the description for adding Places in server side with NodeJS, doesn't work.

[BookLoveFRR]

hi, am getting 'ApiNotActivatedMapError' in the browser, followed all the steps, created project, set up billing and enabled places API key and used it in JS code, its really frustrating to see this error, have been trying this from past few days. any help is much appreciated thanks

[chaprudhomme]

Hi ! I've done this tutorial, step by step, but I have always the same error : "uncaught in promise: initAutocomplete is not a function". Could someone help me ? Thanks a lot !

[BookLoveFRR]

Hi, i am getting an error 'ApiNotActivatedMapError' in browser.But I enabled the places api for a project called MyFirstProject and used the same name to create Single page application in angular, i'e the project folder name in angular matches the project name in google cloud platform for which api key is enabled. any help is much appreciated, TIA.

[donaldhudson]

Great video by the way, but is this api free to use?

[jordonpilling]

it's 2025 and there is still no way to have the 1st suggestion be used when user types partial string and hits enter without going down to select a suggestion first - interenet is full of janky solutions simulating downArrow and all sorts, is there any hidden clean way i'm not seeing?!!?!

[camn-bvvq]

Is there s way to embed an fixed prediction showed in the input once we type? Example whatever I type, I'd like It shows me "My location" firs in the list, then the ones that Google retrieve normally from API