How to Use Google Maps JavaScript API for Autocomplete Places?

How to Use Google Maps JavaScript API for Autocomplete Places?

In this tutorial, we will learn how to use google maps javascript API for autocomplete places search. We will make an input search box with a google map and display the address.

Google autocomplete places search feature is a very nice feature of google maps services. When you don’t know the exact place address and try this feature, you will see when you start typing it will show you related places results.

It will give you places address suggestion list based on the search term that you had typed in the input search box. You can integrate this autocomplete feature to search the addresses on your website or application.

So you need google maps javascript API to integrate this feature and you can get the API key from your google developer console account.

To use google maps javascript API for autocomplete, you also have to enable the Places API from the google API library. Let’s get started with the tutorial.

Autocomplete Places with Google Maps JavaScript API

Let’s start to make a simple HTML web page to load google maps. We will also use the javascript function that will be integrated with places API and show the suggestion addresses list.

Get Google Maps JavaScript API

To make autocomplete address functionality, you need a google maps javascript API key. You can get that API key from the google developer console account. You can also read the following tutorial on how to generate a google maps API key.

Create Google Map and Autocomplete Input Box Structure

As of now, you have a google maps API key, then now we will create a google map and autocomplete the input search box with HTML elements.

Let’s create the HTML structure to hold the google map, geo-location data, and input search field. We will create a simple HTML page, but you design it as per your need.

First, we will create an input field where you will type the address. I’m giving “searchMapInput” ID to this input field to make an event action.

Then we will take blank <div> with ID “map” to hold the google map. If you want to filter out the search result then you can display the geolocation fields.

See the following code for better clarification about the above three steps.

You can see in the above code, we also have added the google script source. In this source, you have to pass the query parameters like libraries=places, key=YOUR_API_KEY, and callback=initMap (callback function).

Note: As I said above that make sure you also have enabled the Places API library. You can enable this library from the google API library page and you can navigate through it by clicking on the Library option from the sidebar menu.

Integrate Google Maps with Autocomplete Feature

Now we will integrate google maps with autocomplete places address functionality. We will make a javascript function to get the input from the search box the get the result from the API library based on that search term.

So simply add the following javascript code to your web page and save it. You can also customize it according to your requirements.

Make sure the function name is the same as you passed in the google maps script source as a callback function. It will initialize the method when google maps javascript API will load.

Conclusion

So in this tutorial, you learned how to use the google maps javascript API key to make the google autocomplete places search functionality. You also have to enable the Place API to make proper working.

You see how we make javascript function to initialize the functionality of google autocomplete places API library. Initialize Method will be the same with the callback parameter value.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.