jquery-locationpicker
Version:
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
292 lines (265 loc) • 12.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap stuff -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- -->
<link rel="stylesheet" href="css/style.css">
<!-- Location picker -->
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
<script src="../dist/locationpicker.jquery.min.js"></script>
<title>jquery-location-picker demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div id="examples">
<p>
<h3>Providing options</h3>
<pre>
<div id="somecomponent" style="width: 500px; height: 400px;"></div>
<script>
$('#somecomponent').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300
});
</script>
</pre>
<p>Result</p>
<div id="us1" style="width: 500px; height: 400px;"></div>
<script>$('#us1').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300
});</script>
<h3>Binding UI with the widget</h3>
<pre>
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>
</pre>
<p>Result:</p>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-1 control-label">Location:</label>
<div class="col-sm-5"><input type="text" class="form-control" id="us2-address"/></div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">Radius:</label>
<div class="col-sm-2"><input type="text" class="form-control" id="us2-radius"/></div>
</div>
<div id="us2" style="width: 550px; height: 400px;"></div>
<div class="clearfix"> </div>
<div class="m-t-small">
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
<div class="col-sm-1"><input type="text" class="form-control" style="width: 110px" id="us2-lat"/></div>
<label class="p-r-small col-sm-1 control-label">Long.:</label>
<div class="col-sm-1"><input type="text" class="form-control" style="width: 110px" id="us2-lon"/></div>
</div>
<div class="clearfix"></div>
</div>
<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')
},
enableAutocomplete: true
});</script>
<h3>Subscribing for events</h3>
<p>The following example illustrates how to subscribe "Change" event. See the list of the available events along
with functions signature <a href="#events">above</a>.</p>
<pre>
$('#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 + ")");
}
</pre>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-1 control-label">Location:</label>
<div class="col-sm-5"><input type="text" class="form-control" id="us3-address"/></div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">Radius:</label>
<div class="col-sm-2"><input type="text" class="form-control" id="us3-radius"/></div>
</div>
<div id="us3" style="width: 550px; height: 400px;"></div>
<div class="clearfix"> </div>
<div class="m-t-small">
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
<div class="col-sm-2"><input type="text" class="form-control" style="width: 110px" id="us3-lat"/></div>
<label class="p-r-small col-sm-1 control-label">Long.:</label>
<div class="col-sm-2"><input type="text" class="form-control" style="width: 110px" id="us3-lon"/></div>
</div>
<div class="clearfix"></div>
<script>$('#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 + ")");
}
});</script>
</div>
<h3>Manipulating map widget from callback</h3>
<p>If you need direct access to the actual Google Maps widget you can use <code>map</code> method as follows.
This example illustrates how to set zoom pragmatically each time when location has been changed.</p>
<pre>
$('#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);
}
</pre>
<div>
<div id="us4" style="width: 500px; height: 400px;"></div>
<script>
$('#us4').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 300,
onchanged: function (currentLocation, radius, isMarkerDropped) {
var mapContext = $(this).locationpicker('map');
mapContext.map.setZoom(13);
}
});</script>
</div>
<h3>Advanced usage of geo decoder features</h3>
<p>
Along with decoded readable location name plugin returns address split on components
(state, postal code, etc.) which in some cases can be pretty useful.
</p>
<pre>
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);
}
});
</pre>
<div>
<div class="container-fluid">
<div class="col-lg-6">
<div id="us5" style="width: 500px; height: 400px;"></div>
<p></p>
</div>
<div class="col-lg-6">
<div class="form container-fluid">
<div class="row form-group">
<label class="col-sm-2 control-label">Street:</label>
<div class="col-sm-6">
<input class="form-control" id="us5-street1" disabled="disabled">
</div>
</div>
<div class="row form-group">
<label class="col-sm-2 control-label">City:</label>
<div class="col-sm-6">
<input class="form-control" id="us5-city" disabled="disabled">
</div>
</div>
<div class="row form-group">
<label class="col-sm-2 control-label">State or Province:</label>
<div class="col-sm-6">
<input class="form-control" id="us5-state" disabled="disabled">
</div>
</div>
<div class="row form-group">
<label class="col-sm-2 control-label">Postal code:</label>
<div class="col-sm-6">
<input class="form-control" id="us5-zip" disabled="disabled">
</div>
</div>
<div class="row form-group">
<label class="col-sm-2 control-label">Country:</label>
<div class="col-sm-6">
<input class="form-control" id="us5-country" disabled="disabled">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<script>
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);
}
});
</script>
</div>
<div>
<h2 class="page-header" id="credits">Credits</h2>
Dmitry Berezovsky, Logicify (<a href="http://logicify.com/" target="_blank">http://logicify.com/</a>)
</div>
</div>
<footer>
<p class="pull-right"><a href="#start">Back to top</a></p>
<p><a href="http://logicify.com/" target="_blank">Logicify</a></p>
</footer>
</div>
</body>
</html>