loading

How to Autocomplete Address Field using Google Maps with Places Library

How to Autocomplete Address Field using Google Maps with Places Library

How to Autocomplete Address Field using Google Maps with Places Library

0 Sales

Free

The autocomplete input field allows you to choose a value from a list of pre-populated choices. The location search input box benefits greatly from the autocomplete option. It makes it easier to find a suitable place without having to type the complete address. Using the Google Maps JavaScript API, autocomplete capability may be quickly added to the input field for text-based geographic location searches.

Using jQuery, you can easily transform text input to a location search box using Google Maps JavaScript API with Places library. The location autocomplete textbox can be used to collect the user's address or location information. When the user begins entering in the location search form, the location suggestions appear below the input area. In this article, we'll teach you how to add an autocomplete address field to an HTML form by using the Google Maps JavaScript API and jQuery.

jQuery Library

Include the jQuery library since it is used to activate event handlers.

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

Google Maps JavaScript API

To search for places and provide location suggestions in the autocomplete box, Google Maps JavaScript API and Places Library are utilised.

 - Load the Places library into the Google Maps JavaScript API (libraries=places).
 - In the key parameter, enter the API key.

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

Find Places with Google Maps JavaScript API

JavaScript Code:

The Autocomplete() function of the Google Maps Locations library is used in the following JavaScript code to activate the autocomplete places search feature in the specified input field.

 - The matching places are retrieved from the Places library and added to the recommendations box based on the search keyword.
 - The getPlace() function is used to obtain the latitude and longitude of the chosen place.
 - Set the specified latitude and longitude,

      - to the hidden input field for form submission value.

      - to the element that will be shown 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();
    });
});

When the input field value is changed, jQuery removes the latitude and longitude.

$(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:

Create an input element that will house the autocomplete location search.

 - In the element, define the ID property and use this ID as a selection (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

With the componentRestrictions option in the Autocomplete() function, you may apply a nation limitation to the locations search.

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

 

Conclusion

The location autocomplete feature is really handy in the data generation form, where the address information must be entered. This autocomplete capability is also available in the location search box. Our autocomplete location search script will assist you in adding a user-friendly address input box to your online form. Using jQuery, you can quickly customise the autocomplete location textbox feature to meet your specific needs.

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Jan 25, 2022

Updated Date : Jan 25, 2022

Ratings

Comments : 0

Downloads : 0