Google Places AutoComplete example without using Maps JavaScript

To google places autocomplete example without using maps javascript; Through this tutorial, i am going to show you how to implement google places autocomplete fill location(address) using google api key with example without showing map in javaScript with html.

Google Places AutoComplete example without using Maps JavaScript

Create HTML Page
Create Google Api Key
Add Google Api key in HTML Page
Run this App

Create HTML Page

Create one html form name AutoAddress.html and put the html code in this file :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <title>Google Places Autocomplete InputBox Example Without Showing Map - Laratutorials.com</title>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12"><h2>Google Places Autocomplete InputBox Example Without Showing Map</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="autocomplete_search" name="autocomplete_search" type="text" class="form-control" placeholder="Search" />
                    <input type="hidden" name="lat">
                    <input type="hidden" name="long">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Create Google Api Key

Create google api key for google places autocomplete example, so click link and create your api key Get Google API Key

Then click the Get Google API Key link , after the page look like this. And create a project , so click on the create project and create your project .

After successfully create project, second thing see the side menu bar and click credentials. Here create google api key :

google places autocomplete example without map

Then set HTTP Referrers like http://localhost/autoAddress.html , look like this picture :

After successfully create api key , Click on top google dashboard search bar and search Place API and Enable the Places API.

Add Google Api key in HTML Page

Now, need to add google api key in script where written PUT_YOUR_API_KEY_HERE; as follows:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_API_KEY_HERE&libraries=places"></script>
        
<script>
  google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
      var input = document.getElementById('autocomplete_search');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function () {
      var place = autocomplete.getPlace();
      // place variable will have all the information you are looking for.
      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());
    });
  }
</script>

After successfully put the api key in script, we need to put the code on AutoAddress.html form after closing body tag

Run this App

Hit the url on your browser :

http://localhost/autoAddress.html

Google Places AutoComplete example without using Maps JavaScript