jQuery Location Picker Plugin with Google Maps and Openstreetmap

Yet another jQuery based location picker plugin that provides address autocomplete using Google Places API and displays the selected location on the Openstreetmap.

How to use it:

1. Load the required JavaScript files in your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//www.openlayers.org/api/OpenLayers.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

2. Load the location picker plugin after jQuery JavaScript library.

<script src="js/location-picker.min.js"></script>

3. Create the Html for the location picker.

<div class="location-picker">
  <input type="text" id="txtAddress" placeholder="Enter address here" data-type="address">
  <input type="hidden" id="txtLocation" data-type="location-store">

  <div class="map-container">
    <div id="map" data-type="map"></div>
  </div>
</div>

4. Initialize the plugin.

$('.location-picker').locationPicker();

5. Default plugin options.

// address autocomplete input
address_el : 'input[data-type="address"]', 

// map element to render OSM map in
map_el: '[data-type="map"]', 

// Location information is stored in this input in JSON format
save_el: '[data-type="location-store"]', 

/* if true, full place information is returned in JSON format 
returns latitude, longitude and address string in JSON format
*/          
raw_data: false, 
init:{ 

  // initializes location picker with current location 
  current_location: true, 
  address : 'Put init adddress here',

  // put initial location here
  location : {latitude, longitude} 
}

6. Callback method.

$('.location-picker').locationPicker({
  {
    // options here
  }
  locationChanged : function(data){
  // do something
  }
});

7. Public methods.

// returns current location data
getData()

// returns address string
getAddress()

// sets location picker address and shows location on map
setAddress(address)

// sets location and reverse geocodes it's address
setLocation(lat, long)

Change log:

2015-10-09

• Use place.geometry.location.H and .L as geo location.

---

This awesome jQuery plugin is developed by dorin2006. For more Advanced Usages, please check the demo page or visit the official website.