jQuery Location Autocomplete with Google Map

This is a very useful tutorial, if your are working on any location based project then you can use this location picker jquery plugin to pick location from google map or use auto-complete location box to search for any location which will return all the details of that location.

Locationpicker is a simple jQuery plugin that enables you to pick a place/address/location from a dropdown suggestion box and display the place on the Google Maps, based on Google Maps API’s places library.



There is mainly two features in this plugin.
1. Allows to choose an area- This plug-in allows to easily find and select a location on the Google map. Along with a single point selection, it allows to choose an area by providing its center and the radius. All the data can be saved to any HTML input element automatically as well as be processed by Javascript (callback support).

2. Automatic address resolve- The other feature of the plug-in is automatic address resolver which allows to get address line from the selected latitude and longitude. The plug-in also supports searching by address typed into the bound input element which uses auto-complete feature from Google API to make the search process easier. In this case the marker will be.
location-picker
Lets start the tutorial.

This plugin dependent on two libraries ( google map and jquery)
First of all include both the libraries on the page After that include locationpicker.jquery.js

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
<script src="js/locationpicker.jquery.js"></script>

Now you are ready to use location picker functions on your project.

Here is the simple example to show google map with location picker pointer.

<div id="somecomponent" style="width: 500px; height: 400px;"></div>
<script>
$('#somecomponent').locationpicker();
</script>

Let’s go for more advance feature, There are some parameter in location picker which you can use to make it more advance.

 <script>
            $('#us3').locationpicker({
                location: {
                    latitude: 28.6618976,
                    longitude: 77.22739580000007
                },
                radius: 300,
                inputBinding: {
                    latitudeInput: $('#us3-lat'),
                    longitudeInput: $('#us3-lon'),
                    radiusInput: $('#us3-radius'),
                    locationNameInput: $('#us3-address')
                },
                enableAutocomplete: true,
                onchanged: function (currentLocation, radius, isMarkerDropped) {
                    // Uncomment line below to show alert on each Location Changed event
                    // Perform action on selection  
                }
            });
        </script>

In the above example you can set the default latitude and longitude of the location and bind results to text box, same as you search for any location then it’ll automatically assign your searched location on the map.


See live working demo and download source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff