Google places autocomplete example using maps JavaScript API -

  • 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.

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

<!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>
<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>
<!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=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>
</body>
</html>
http://localhost/autocomplete

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store