How to Add Google Places Autocomplete Textbox- Build IT Masters

How to Add Google Places Autocomplete Address Field Text box in JavaScript — Google Places Autocomplete Address Field Text box in JavaScript

In this article, learn how to add a Place Autocomplete search bar to your webpage with the client-side Maps JavaScript API with Google Places Autocomplete. First, you need a billing details added to Google Cloud Platform. Otherwise, you will get “Places API error: BillingNotEnabledMapError” and they say “You must enable Billing on the Google Cloud Project at your project“. Let’s get into the article.

1. Create project on Google Cloud Console and Enable Services

Log into your Google Cloud Console and go to Dashboard.

Then create a new project. After that, go to “Enabled APIs & Services” and click the plus button (If you missed the plus button, you enable services on “Library” section on the left-hand side sidebar).

Enabled APIs & Services – Enable Services

Then search for “Geolocation API”, “Maps JavaScript API” and “Places API” and enable it.

2. Create API Key

Go to “Credentials” tab on the left sidebar and click “Create Credentials”. Then select “API KEY”. You can see the generated key on the screen, and also you can see a warning message like “This key is unrestricted. To prevent unauthorized use, we recommend restricting where and for which APIs it can be used”. We have to restrict the key. Go to “Edit key” option or click the generated API key to edit the key.

As you can see, there is a section called API restrictions. You can manage your restriction in here.

4. Project Create – Google Places Autocomplete

In here, I am going to create a pure HTML file. If you are using any framework, you can use “Google Maps JavaScript API Loader” NPM package (Click here) to load the API key. Anyway, let’s get back into our project. Here is the HTML code.

<!DOCTYPE html>
<html>
<head>
    // Google CDN
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    // Google Map API CDN
    <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<title>Build IT Masters</title>
</head>
<body>
    <input type="text" style="width:400px;" id="location">  // User input textbox

<script type="text/javascript">
    $(document).ready(function(){
        var autocomplete;
        var id = 'location';

        autocomplete = new google.maps.places.Autocomplete((document.getElementById(id)),{
            types:['geocode'],
        })

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({"address":firstResult }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat(),
                    lng = results[0].geometry.location.lng(),
                    placeName = results[0].address_components[0].long_name,
                    latlng = new google.maps.LatLng(lat, lng);
            }
        });

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();

            console.log("lat", place.geometry.location.lat()); 
            console.log("lng", place.geometry.location.lng());
        });
    });
</script>

</body>
</html>

Thank you for your valuable time. Please leave a comment if you are interested this article.