Autocomplete Places Search Box using Google Maps JavaScript API

Sometime you might need to add google map on your website or app for searching location or direction of place. It is easy to find out location or direction to reach on any location by using Google map. Type place name, autocomplete address suggestion appear then select desired address or place after that it will give you 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 search box using Google Maps to find direction of any place then you are on 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 api key. Click on Get a key button as shown below.

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

2.    Create index.html file with following html as shown below. Here we are using three html elements. 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 js library which use 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 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 following page as shown below. Enter location which you want to find location or direction will appear autocomplete suggestion dropdown.  Select your address from autocomplete suggestion dropdown will show direction or how to reach in your entered address.

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

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments