jQuery addressPicker Plugin explained

Today, I am going to explain you a jQuery plugin called "addressPicker". The beauty of this plugin is that it has auto-complete feature which comes from google map geocoder suggestion. It is like you are searching something on Google map and the desired address comes in the auto-complete. See below Image.

Exciting..Isn't it? So how do we do this? Well, first of all, you need to reference 2 js libraries in your code.

http://maps.google.com/maps/api/js?sensor=false http://xilinus.com/jquery-addresspicker/src/jquery.ui.addresspicker.js

The first one supports the Google Map geocoder integration and second one is for addressPicker plugin. Or you can also download these from this URL.

All you need to do is to place a textbox on your page and use below jQuery to have address picker on your page.

$("#addresspicker").addresspicker(); 

Cool and Simple!!But wait, that is not enough.. This plugin also provides you to facility to show the selected address on Google map, display the country, locality, latitude and longitude. See below image.

To achieve this, just declare 4 text box for country, locality, latitude and longitude. And we also need a div element to show the map. And use below jQuery code to achieve the same.

var addresspickerMap = $("#addresspicker_map" ).addresspicker({  elements: {     map:      "#map",     lat:      "#lat",     lng:      "#lng",     locality: '#locality',     country:  '#country'  } }); var gmarker = addresspickerMap.addresspicker( "marker"); gmarker.setVisible(true); addresspickerMap.addresspicker( "updatePosition"); 

The last 3 lines of above jQuery code, set the marker on Google Map.

Don't forget to add this css class to div map element.

#map {   border: 1px solid #DDD;    width:300px;   height: 300px;   float:left;     margin: 0px 0 0 10px;   -webkit-box-shadow: #AAA 0px 0px 15px; } 

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.