jQuery Location Picker Plugin 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);
    }
});