Google places autocomplete example using maps JavaScript API -

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

<!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
Bipsmedium

Bipsmedium

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.

More from Medium

How to install Sass on Linux — Ubuntu 18.04 / 20.04

Web Application Development

Get user location from Browser using javascript and Geolocation API -

Auto Save Example In PHP & MYSQL.

Auto Save Example In PHP & MYSQL.