November 08, 2021

Autocomplete Address Field in Google Maps

Providing users with a smooth and intuitive experience is critical when it comes to entering address details. Learn how to use google autocomplete address API with google maps to suggest locations on map.

Autocomplete Address Field in Google Maps
Download

In order to improve user experience and speeding up form submission it is required to show user with some suggestions as user types in the field. One of the powerful features of google is google maps address autocomplete which uses the Google Maps JavaScript API and suggests addresses and places as user types. This helps in increasing accuracy by reducing the chances of misspelled and invalid addresses. In this post we will explore how to integrate google address autocomplete API in website along with google maps in simple steps.

 

Integrate Google Places Autocomplete Field in Google Maps

Although google places autocomplete can be used for form submissions by providing suggestions, it can also be used as google map autocomplete field and display the user selected location on map. We will create map and place a marker on map when user selects a suggestions from list. It is also possible to show multiple markers on google map and still use the autocomplete input field with unique styling for this address marker.

 

Step 1: Enable Google Map API and Google Places API

First step is to have a Google Maps API key with places API enabled. This may also require billing enabled on the account. 

  • Go to Google Cloud Console after login.
  • Create a project or selected existing one.
  • In the left sidebar navigate to "API & Services" ➝ "Library".
  • Search for "Map JavaScript API" and "Places API" and enable both APIs.
  • After both APIs are enabled, go to "Credentials" and click "Create Credentials".
  • Select the "API Key" to generate an API key for use in our website. 
 

Step 2: Add Places Autocomplete Field to HTML

Lets start by writing an HTML page. We will add an input field and a map container, then we will bind that input field with google places autocomplete API using JavaScript.

index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Autocomplete Address Field in Google Maps - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <section class="section py-4">
            <div class="container">
                <input type="text" id="autocomplete" class="form-control"  placeholder="Enter your address" />

                <div class="relative mb-4" style="padding-top: 56%;">
                    <div id="google-map" style="position: absolute; inset: 0;"></div>
                </div>
            </div>
        </section>
        <footer>
            <script src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAP_API_KEY}&callback=initMap&libraries=places" defer></script>
            <script type="text/javascript" src="js/javascript.js"></script>
        </footer>
    </body>
</html>
 

Step 3: Initialize Google Places Autocomplete and Google Map

Next step is to initialize google map and bind input field with google places autocomplete API using JavaScript. Steps to integrate google location autocomplete on input field and map are as below:

  • Define a variable marker which is initially null.
  • Create a function initMap() which will handle all the logic.
  • Inside function, create an object for map options and initialize google map.
  • Then create options for autocomplete field and initialize places autocomplete API providing it input field and options.
  • Bind the autocomplete field to map and initialize a marker.
  • Add an event listener to autocomplete field, whenever place is changed we change the position of marker and display it on map.

javascript.js 

let marker;

function initMap() {
    const mapOptions = {
        center: { lat: 37.7749, lng: -122.4194 },
        zoom: 12,
    };

    const map = new google.maps.Map(document.getElementById("google-map"), mapOptions);

    const input = document.getElementById("autocomplete");

    const options = {
        types: ["address"],
        fields: ["formatted_address", "geometry", "name"],
        strictBounds: false,
        componentRestrictions: { country: "us" }
    };

    const autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.bindTo("bounds", map);

    marker = new google.maps.Marker({map,anchorPoint: new google.maps.Point(0, -29)});

    autocomplete.addListener("place_changed", () => {
        marker.setVisible(false);

        const place = autocomplete.getPlace();

        if (!place.geometry || !place.geometry.location) {
            window.alert(`Location "${place.name}" not found`);
            return;
        }

        map.setCenter(place.geometry.location);

        marker.setPosition(place.geometry.location);
        marker.setVisible(true);
    });
}

We demonstrated in simple steps how to use google address autocomplete field with google maps. Whenever user types in input field, it will pull suggestions from google database and show predictive results such as street address, landmarks and more.

Home