Autocomplete Places Search Box using Google Maps JavaScript API

Sometime you might need to add Google Maps on your website or app for searching the location or direction of the place. It is easy to find out location or direction to reach on any location by using Google Maps. Type place name, autocomplete address suggestion appear then select the desired address or place after that it will give you the right direction to reach there. You can also get extra information about any location like postal code, latitude, and longitude. If you are thinking to add a search box using Google Maps to find the direction of any place then you are in right place, we will describe all things here step by step. Let’s start it from generating Google API Key.

1.    Go to https://developers.google.com/maps/documentation/javascript/get-api-key to get the API key. Click on Get a key button as shown below.

After clicking on getting a key you will get the key which will we use in our file below.

2.    Create an index.html file with the following HTML as shown below. Here we are using three HTML elements. The first input box is for search, second for showing map by default on-page, and third for showing details of entered or desired address.

<input id="search" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
<ul id="geoData">
<li>Full Address: <span id="location"></span></li>
<li>Postal Code: <span id="postal_code"></span></li>
<li>Country: <span id="country"></span></li>
<li>Latitude: <span id="lat"></span></li>
<li>Longitude: <span id="lon"></span></li>
</ul>
<script>

3. Now we write some JavaScript code as shown below. Here we make functions to find the desired address as well as rendering google map. At the bottom, we have attached the js library which uses callback function initMap when you load the file.

<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('search');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

varinfowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});

autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);

});
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key==Your-API-KEY&libraries=places&callback=initMap" async defer></script>

Put your API key in the above-attached file which you got in step 1.

4. Put some style code for Google Map sizing to be loaded on your index.html page as shown below:

<style>
#map {
width: 100%;
height: 400px;
}
</style>

Run index.html will show the following page as shown below. Enter the location in which you want to find location or direction will appear to autocomplete suggestion dropdown. Select your address from the autocomplete suggestion dropdown will show direction or how to reach in your entered address.

If you have any query feel free to write in the comment section.