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.
+ ++ +
+ Get from GitHub +
+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 +
- Separete module for AngularJS support +
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.82480777777776
+ },
+ locationName: "",
+ radius: 500,
+ zoom: 15,
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
+ styles: [],
+ mapOptions: {},
+ scrollwheel: true,
+ inputBinding: {
+ latitudeInput: null,
+ longitudeInput: null,
+ radiusInput: null,
+ locationNameInput: null
+ },
+ enableAutocomplete: false,
+ enableAutocompleteBlur: false,
+ autocompleteOptions: null,
+ addressFormat: 'postal_code',
+ enableReverseGeocode: true,
+ draggable: true,
+ onchanged: function(currentLocation, radius, isMarkerDropped) {},
+ onlocationnotfound: function(locationName) {},
+ oninitialized: function (component) {},
+ // must be undefined to use the default gMaps marker
+ markerIcon: undefined,
+ markerDraggable: true,
+ markerVisible : 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 + +
Plugin Options
+| name | +type | +params | +description | +
| location | +getter | +null |
+ to get current position of marker | +
| setter | +radius, latitude, longitude |
+ to set position of marker | +|
| subscribe | +setter | +event, callback |
+ add listener to map on event with callback |
+
| map | +getter | +null |
+ return current map context | +
| setter | +null |
+ is |
+ |
| autosize | +call method | +null |
+ call inner method of plugin to call map event 'resize' | +
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 + ")");
+ }
+});
+
+ Change mapTypeId
+You can set one of the google.maps.MapTypeId value. Google Maps provides four map types:
+ HYBRID, ROADMAP, SATELLITE and TERRAIN
+$('#us4').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ inputBinding: {
+ latitudeInput: $('#us4-lat'),
+ longitudeInput: $('#us4-lon'),
+ radiusInput: $('#us4-radius'),
+ locationNameInput: $('#us4-address')
+ },
+ mapTypeId: google.maps.MapTypeId.SATELLITE,
+ enableAutocomplete: true
+});
+
+ Using custom map styles
+
+var customStyles = [{
+ "elementType": "geometry",
+ "stylers": [{"hue": "#ff4400"}, {"saturation": -68}, {"lightness": -4}, {"gamma": 0.72}]
+}, {"featureType": "road", "elementType": "labels.icon"}, {
+ "featureType": "landscape.man_made",
+ "elementType": "geometry",
+ "stylers": [{"hue": "#0077ff"}, {"gamma": 3.1}]
+}, {
+ "featureType": "water",
+ "stylers": [{"hue": "#00ccff"}, {"gamma": 0.44}, {"saturation": -33}]
+}, {
+ "featureType": "poi.park",
+ "stylers": [{"hue": "#44ff00"}, {"saturation": -23}]
+}, {
+ "featureType": "water",
+ "elementType": "labels.text.fill",
+ "stylers": [{"hue": "#007fff"}, {"gamma": 0.77}, {"saturation": 65}, {"lightness": 99}]
+}, {
+ "featureType": "water",
+ "elementType": "labels.text.stroke",
+ "stylers": [{"gamma": 0.11}, {"weight": 5.6}, {"saturation": 99}, {"hue": "#0091ff"}, {"lightness": -86}]
+}, {
+ "featureType": "transit.line",
+ "elementType": "geometry",
+ "stylers": [{"lightness": -48}, {"hue": "#ff5e00"}, {"gamma": 1.2}, {"saturation": -23}]
+}, {
+ "featureType": "transit",
+ "elementType": "labels.text.stroke",
+ "stylers": [{"saturation": -64}, {"hue": "#ff9100"}, {"lightness": 16}, {"gamma": 0.47}, {"weight": 2.7}]
+}];
+$('#us5').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ inputBinding: {
+ latitudeInput: $('#us5-lat'),
+ longitudeInput: $('#us5-lon'),
+ radiusInput: $('#us5-radius'),
+ locationNameInput: $('#us5-address')
+ },
+ styles: customStyles,
+ enableAutocomplete: true
+});
+
+ Result:
+ +Marker is fixed in center of map
+jquery-locationpicker-plugin
+ provide opportunity to fix marker in the center of map div.
+$('#us6').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ inputBinding: {
+ latitudeInput: $('#us6-lat'),
+ longitudeInput: $('#us6-lon'),
+ radiusInput: $('#us6-radius'),
+ locationNameInput: $('#us6-address')
+ },
+ markerInCenter: true,
+ enableAutocomplete: true
+});
+
+ Providing autocompleteOptions
+You can set biases and search-area boundaries for Autocomplete. Read more + here. +
+
+$('#us7').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ inputBinding: {
+ latitudeInput: $('#us7-lat'),
+ longitudeInput: $('#us7-lon'),
+ radiusInput: $('#us7-radius'),
+ locationNameInput: $('#us7-address')
+ },
+ enableAutocomplete: true,
+ autocompleteOptions: {
+ types: ['(cities)'],
+ componentRestrictions: {country: 'fr'}
+ }
+});
+
+ 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.
+$('#us8').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ onchanged: function (currentLocation, radius, isMarkerDropped) {
+ var mapContext = $(this).locationpicker('map');
+ mapContext.map.setZoom(13);
+ }
+});
+
+ 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) {
+ $('#us9-street1').val(addressComponents.addressLine1);
+ $('#us9-city').val(addressComponents.city);
+ $('#us9-state').val(addressComponents.stateOrProvince);
+ $('#us9-zip').val(addressComponents.postalCode);
+ $('#us9-country').val(addressComponents.country);
+}
+$('#us9').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);
+ }
+});
+
+ Select a city as a location rather than a specific address
+You can set property addressFormat to display specific address in
+ locationNameInput. Default value is postal_code. All types here
+$('#us10').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ inputBinding: {
+ latitudeInput: $('#us10-lat'),
+ longitudeInput: $('#us10-lon'),
+ radiusInput: $('#us10-radius'),
+ locationNameInput: $('#us10-address')
+ },
+ radius: 300,
+ addressFormat: 'country'
+});
+
+ 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. +
+
+$('#us11').locationpicker({
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ radius: 300,
+ inputBinding: {
+ latitudeInput: $('#us11-lat'),
+ longitudeInput: $('#us11-lon'),
+ radiusInput: $('#us11-radius'),
+ locationNameInput: $('#us11-address')
+ },
+ enableAutocomplete: true
+});
+$('#us11-dialog').on('shown.bs.modal', function () {
+ $('#us11').locationpicker('autosize');
+});
+
+
+ 
ngular wrapper
+ Since version 0.1.15 available simple ability to add our plugin in angular applicaions.
+Usage
+Include all requirements
++<head> + //angular + <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> + + //jQuery + <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> + + //Google maps API + <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places'></script> + + //Locationpicker + <script src="../js/locationpicker.jquery.min.js"></script> + <script src="../js/angularLocationpicker.jquery.js"></script> +</head> ++
Basic usage
+
+<body ng-app="angularExample" ng-controller="angularExampleController">
+ <locationpicker options="locationpickerOptions"></locationpicker>
+<script>
+ angular.module('angularExample', ['angular-jquery-locationpicker'])
+ .controller('angularExampleController', [
+ '$scope',
+ function ($scope) {
+ $scope.locationpickerOptions = {
+ location: {
+ latitude: 46.15242437752303,
+ longitude: 2.7470703125
+ },
+ inputBinding: {
+ latitudeInput: $('#us3-lat'),
+ longitudeInput: $('#us3-lon'),
+ radiusInput: $('#us3-radius'),
+ locationNameInput: $('#us3-address')
+ },
+ radius: 300,
+ enableAutocomplete: true
+ };
+ }
+ ]);
+</script>
+</body>
+
+ Credits
++ Dmitry Berezovsky, Logicify (http://logicify.com/) +
++ Gennadiy Varava, Logicify (http://logicify.com/) +
+