<div id="somecomponent" style="width: 500px; height: 400px;"></div> <script> $('#somecomponent').locationpicker({ location: {latitude: 46.15242437752303, longitude: 2.7470703125}, radius: 300 }); </script>
Result
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:
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 + ")"); }
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); }
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); } });