jQuery Location Picker Plugin with Google Maps and Openstreetmap

jQuery Location Picker Plugin with Google Maps and Openstreetmap
File Size: 15.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.