AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Autocomplete Address Field using Google Maps JavaScript API with Places Library

jQuery Library

Lakshika Mathur by Lakshika Mathur
December 20, 2019
Reading Time: 4 mins read
0
Autocomplete Address Field using Google Maps JavaScript API with Places Library

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.

RELATED POSTS

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>

SEE ALSO: Login with Instagram using JavaScript SDK

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"
    }
});

SEE ALSO: Load Data on Page Scroll from MySQL Database using jQuery Ajax PHP

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 FieldGoogle Maps
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

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

January 6, 2020
162
Confirmation Before Closing of Tab/Browser using JavaScript
JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
496
Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Create a Digital Clock with Date using JavaScript
JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
182
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Next Post
Add Custom Marker Icons to Google Map Dynamically from the Database with PHP and MySQL

Add Custom Marker Icons to Google Map Dynamically from the Database with PHP and MySQL

Distance Between Two Addresses using Google Maps API and PHP

Distance Between Two Addresses using Google Maps API and PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version