The autocomplete input field permits choosing a value from the pre-populated plan’s list. Therefore, this autocomplete feature is handy for the location search input field. Similarly, it helps to select a proper location without typing the entire address. Also, you can add the autocomplete functionality to the input field for text-based geographic location searches using the Google Maps JavaScript API.

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Confirmation Before Closing of Tab/Browser using JavaScript

Google Maps JavaScript API with Places library delivers an easy way to convert text input to location search box using jQuery. So, you can use the location autocompletes textbox to get the user’s information on the address or location information. Therefore, If the user starts to type in the location search field, there is a list of place estimates under the input field. In this tutorial, we will explain to you how to attach an autocomplete address field to HTML form by using Google Maps JavaScript API and jQuery.

jQuery Library

The jQuery maybe use to elicit event handlers, so comprise the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Google Maps JavaScript API

You can use Google Maps JavaScript API and Places Library to search for places and show location predictions in autocomplete box.,

Load the Google Maps JavaScript API with Places library (libraries=places).
Stipulate the API key in the critical parameter.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=Your_API_Key"></script>

JavaScript Code:

The following JavaScript code permits autocomplete places search feature in the specified input field using Autocomplete() method of the Google Maps Places library.

Grounded on the search term, the matched places are fetched from the Places library and attach to the suggestions box.
The latitude and longitude of the selected location are saved usinggetPlace() method.
Set the selected latitude & longitude,
- to the hidden input field for getting value on form submission.
- to the element for showing on the web page.

var searchInput = 'search_input';

$(document).ready(function () {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
        types: ['geocode'],
    });
	
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var near_place = autocomplete.getPlace();
        document.getElementById('loc_lat').value = near_place.geometry.location.lat();
        document.getElementById('loc_long').value = near_place.geometry.location.lng();
		
        document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
        document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
    });
});

Eliminate latitude & longitude on changing the input field value using jQuery.

$(document).on('change', '#'+searchInput, function () {
    document.getElementById('latitude_input').value = '';
    document.getElementById('longitude_input').value = '';
	
    document.getElementById('latitude_view').innerHTML = '';
    document.getElementById('longitude_view').innerHTML = '';
});

HTML Code:

Generate an input element wherever you can add the autocomplete location search.

Define the ID characteristic in the element and specify this ID as a selector (searchInput)in JavaScript code.

<!-- Autocomplete location search input --> 
<div class="form-group">
    <label>Location:</label>
    <input type="text" class="form-control" id="search_input" placeholder="Type address..." />
    <input type="hidden" id="loc_lat" />
    <input type="hidden" id="loc_long" />
</div>

<!-- Display latitude and longitude -->
<div class="latlong-view">
    <p><b>Latitude:</b> <span id="latitude_view"></span></p>
    <p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>

Country Restriction

In this functionality, you can add a country restriction on places search with component restrictions option in Autocomplete() process.

var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
    types: ['geocode'],
    componentRestrictions: {
        country: "USA"
    }
});

Conclusion

Firstly, the location autocomplete field is handy in the data construction form, where the address info needs to be submitted. Secondly, you can also use this autocomplete functionality in the location search field. Thirdly, our autocomplete location search script helps you to add a user-friendly way to address the input field in the web form. And at last, you can improve the autocomplete location textbox functionality as per your needs using jQuery.

Also, read our previous blog- Mobile Number Verification via OTP SMS using PHP

Tags: Autocomplete Address Field Google Maps