Google places autocomplete example using maps JavaScript API


Google places autocomplete example using maps JavaScript API

Hi friends, In this tutorial, we will learn how to use Google places autocomplete example using maps JavaScript API and places library. Nowadays it is very important for web developers to integrate the API from third-party services while developing websites and other ERP software and applications.

Also, the requirement from clients is increasing day by day due to these kinds of third-party features because everyone wants to make their business more reliable and user-friendly. As such, web developers have to learn and focus on creating APIs to retain our customers for a longer period of time and build a good relationship with them.

After the successful integration of the API, you will see the result as shown below

Google places autocomplete example using maps JavaScript API

Before getting started we must know the below terms

  • Maps Javascript API:- Maps javascript API is a tool provided by Google that gives us the facility to display the location based on maps. This API provides various types of maps such as roadmap, satellite, hybrid etc.
  • Autocomplete:- The autocomplete is a feature of places library that exists in the Maps javascript API. It provides us the information based on our search queries. When a user types certain words in the Google search bar then many suggestion comes out related to that words. We can accomplish this with the help of autocomplete feature and apply to our custom developments.

Also read, How to embed Google map in HTML using iframe

Required steps to create Google places autocomplete example using maps javascript API and places library

Step 1:- Create an API key for your application in the Google cloud console as shown below

Google places autocomplete example using maps JavaScript API

Go to the left navigation area of the dashboard and find for credentials tab and follow the instruction to generate the API key.

Step 2:- Find the library tab under the APIs and services at the left navigation of the dashboard as shown below

Google places autocomplete example using maps JavaScript API

Step 3:- Now, you can see the welcome page of APIs as shown below.

Google places autocomplete example using maps JavaScript API

Step 4:- The places API should be enabled as shown below

Google places autocomplete example using maps JavaScript API

Step 5:- The maps javascript API should be enabled as shown below

Google places autocomplete example using maps JavaScript API

Step 6:- To use the autocomplete places API, we have to load it with the help of the libraries parameter inside the Javascript Map API URL and the generated API key within the script tags as shown below

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your API key&libraries=places"></script>

Step 7:- Create an HTML file in the root directory of your local server i.e. www folder.

HTML Code:- (autocomplete.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Google places autocomplete example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="width:50%;">
  <h2>Google places autocomplete example</h2>
    <div class="form-group">
      <label for="search">Find Location:</label>
      <input type="text" class="form-control" id="searchTextField" placeholder="Type the location">
    </div>
 </div>
</body>
</html>

Javascript Code:-

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your API key&libraries=places"></script>
    <script>
        function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('city2').value = place.name;
                document.getElementById('cityLat').value = place.geometry.location.lat();
                document.getElementById('cityLng').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Complete Code:-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Google places autocomplete example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="width:50%;">
  <h2>Google places autocomplete example</h2>
    <div class="form-group">
      <label for="search">Find Location:</label>
      <input type="text" class="form-control" id="searchTextField" placeholder="Type the location">
    </div>
   
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBh1__iOLq4pmTZES2w8Ss1dWFs2ITWCys&libraries=places"></script>
    <script>
        function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('city2').value = place.name;
                document.getElementById('cityLat').value = place.geometry.location.lat();
                document.getElementById('cityLng').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>

Step 8:- Open the browser and hit the below URL and test the API

http://localhost/autocomplete

Conclusion:- I hope this tutorial will help you to understand the concept of the Google autocomplete address feature. If there is any doubt then please leave a comment below.


Leave a Comment