JQuery Location Picker
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).
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 automatically positioned on the map after successful address resolution.
The plug-in currently uses JQuery and Google Maps.
Features
- Doesn't require JQuery UI. The only requirements are JQuery and GoogleMaps API
- Allows to pick an area with specified radius
- Automatical binding to UI components (bidirectional data exchange)
- Autocomplete for address input
- Navigation by cordinates as well as by address
Usage
The first step is including all requirements:<head> <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> </head>Basic usage without any settings:
<div id="somecomponent" style="width: 500px; height: 400px;"></div>
<script>
$('#somecomponent').locationpicker();
</script>
Result
Default options:
{
location: {latitude: 40.7324319, longitude: -73.82480799999996},
locationName: "",
radius: 500,
zoom: 15,
scrollwheel: true,
inputBinding: {
latitudeInput: null,
longitudeInput: null,
radiusInput: null,
locationNameInput: null
},
enableAutocomplete: false,
enableReverseGeocode: true,
}
Callback methods:
- onchanged(currentLocation, radius, isMarkerDropped) - Will be fired once location has been changed. Parameter isMarkerDropped will be set to True in case when location has been set by dropping the marker on map. In case when position was set from test input or using API it will be set to False
- onlocationnotfound: function(locationName) - Will be fired when it is impossible that resolve address from user input to coordinates
- oninitialized: function (component) - Will be fired after initialization and positioning marker to the initial location
Examples
Providing options
<div id="somecomponent" style="width: 500px; height: 400px;"></div>
<script>
$('#somecomponent').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300
});
</script>
Result
Binding UI with the widget
Location: <input type="text" id="us2-address" style="width: 200px"/>
Radius: <input type="text" id="us2-radius"/>
<div id="us2" style="width: 500px; height: 400px;"></div>
Lat.: <input type="text" id="us2-lat"/>
Long.: <input type="text" id="us2-lon"/>
<script>$('#us2').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
</script>
Result:
Subscribing for events
The following example illustrates how to subscribe "Change" event. See the list of the available events along with functions signature above.
$('#us3').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300,
inputBinding: {
latitudeInput: $('#us3-lat'),
longitudeInput: $('#us3-lon'),
radiusInput: $('#us3-radius'),
locationNameInput: $('#us3-address')
},
enableAutocomplete: true,
onchanged: function(currentLocation, radius, isMarkerDropped) {
alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
}
Manipulating map widget from callback
If you need direct access to the actual Google Maps widget you can use map method as follows.
This example illustrates how to set zoom pragmatically each time when location has been changed.
$('#us4').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300,
onchanged: function(currentLocation, radius, isMarkerDropped) {
var mapContext = $(this).locationpicker('map');
mapContext.map.setZoom(20);
}
Advanced usage of geo decoder features
Along with decoded readable location name plugin returns address split on components (state, postal code, etc.) which in some cases can be pretty useful.
function updateControls(addressComponents) {
$('#us5-street1').val(addressComponents.addressLine1);
$('#us5-city').val(addressComponents.city);
$('#us5-state').val(addressComponents.stateOrProvince);
$('#us5-zip').val(addressComponents.postalCode);
$('#us5-country').val(addressComponents.country);
}
$('#us5').locationpicker({
location: {latitude: 42.00, longitude: -73.82480799999996},
radius: 300,
onchanged: function (currentLocation, radius, isMarkerDropped) {
var addressComponents = $(this).locationpicker('map').location.addressComponents;
updateControls(addressComponents);
},
oninitialized: function(component) {
var addressComponents = $(component).locationpicker('map').location.addressComponents;
updateControls(addressComponents);
}
});
Using widget in modal
It is pretty common situation when you put widget into the container which is not visible during initialization, e.g. modal dialog. In thins case you need to call "autosize" method each time you resize container.
$('#us6').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300,
inputBinding: {
latitudeInput: $('#us6-lat'),
longitudeInput: $('#us6-lon'),
radiusInput: $('#us6-radius'),
locationNameInput: $('#us6-address')
},
enableAutocomplete: true
});
$('#us6-dialog').on('shown.bs.modal', function () {
$('#us6').locationpicker('autosize');
});