diff --git a/README.md b/README.md index 966ae5d..1819ceb 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,5 @@ jquery-locationpicker-plugin JQuery Location Picker plugin -This plug-in allows to easily find and select location on the Google map. Except of single point it allows to choose some area by providing center of the area and some radius. All the date can be saved to any html input element automatically as well as processed with javascript (callback support). - -The other feature of the plug-in is automatical address resoulver wich allows to get address line from the selected latitude and longitude. Also plug-in supports search by address typed into the binded input element which uses autocomplete feature from Google API to make search process easier. In this case marker will be automatically positioned on the map after successull address resolution. - -Currently plug-in uses JQuery and Google Maps. Integration is pretty simple: - -``` -$('mycontainer').locationpicker(); -``` diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..9572270 --- /dev/null +++ b/css/style.css @@ -0,0 +1,16 @@ +body { + padding-top: 50px; +} +.starter-template { + padding: 40px 15px; + text-align: center; +} +#examples h3{ + cursor: pointer +} +.pac-container { + z-index: 99999; +} +footer { + margin-top: 45px; +} diff --git a/images/basic_ui.png b/images/basic_ui.png new file mode 100644 index 0000000..fdb4fa4 Binary files /dev/null and b/images/basic_ui.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..96ca5e6 --- /dev/null +++ b/index.html @@ -0,0 +1,1076 @@ + + +
+ + + + + + + + + + + + +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 +
++<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
+ + + ++{ + 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 +} ++
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' | +
+ + + + +
+<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 + ")"); + } +}); ++
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 +}); ++
+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:
+ +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 +}); ++
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'} + } +}); ++
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); + } +}); ++
+ 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); + } +}); ++
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' +}); ++
+ 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'); +}); ++ +
Since version 0.1.15 available simple ability to add our plugin in angular applicaions.
+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> ++
+ Dmitry Berezovsky, Logicify (http://logicify.com/) +
++ Gennadiy Varava, Logicify (http://logicify.com/) +
+