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 @@ + + + + + + + + + + + + + + + + jquery-location-picker demo + + + + + +
+ +
+

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 +

+
+
+ +
+ + +
+ +
+ + 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:

+ + +

Plugin Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nametypeparamsdescription
locationgetternullto get current position of marker
setterradius, latitude, longitudeto set position of marker
subscribesetterevent, callbackadd listener to map on event with callback
mapgetternullreturn current map context
setternullis not available +
autosizecall methodnullcall inner method of plugin to call map event 'resize'
+
+
+ + +

+ + + + +

Providing options

+ + +

Binding UI with the widget

+ + +

Subscribing for events

+ + +

Change mapTypeId

+ + +

Using custom map styles

+ + +

Marker is fixed in center of map

+ + +

Providing autocompleteOptions

+ + +

Manipulating map widget from callback

+ + +

Advanced usage of geo decoder features

+ + +

Select a city as a location rather than a specific address

+ + +

Using widget in modal

+ + +
+ +

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>
+            
+
+ +
+ +

+ Dmitry Berezovsky, Logicify (http://logicify.com/) +

+

+ Gennadiy Varava, Logicify (http://logicify.com/) +

+
+ +
+ +
+ + diff --git a/locationpicker.jquery.js b/locationpicker.jquery.js deleted file mode 100644 index 88b3def..0000000 --- a/locationpicker.jquery.js +++ /dev/null @@ -1,249 +0,0 @@ -(function ( $ ) { - - /** - * Holds google map object and related utility entities. - * @constructor - */ - function GMapContext(domElement, options) { - var _map = new google.maps.Map(domElement, options); - var _marker = new google.maps.Marker({ - position: new google.maps.LatLng(54.19335, -3.92695), - map: _map, - title: "Drag Me", - draggable: true - }); - return { - map: _map, - marker: _marker, - circle: null, - location: _marker.position, - radius: options.radius, - locationName: options.locationName, - settings: options.settings, - domContainer: domElement, - geodecoder: new google.maps.Geocoder() - } - } - - // Utility functions for Google Map Manipulations - var GmUtility = { - /** - * Draw a circle over the the map. Returns circle object. - * Also writes new circle object in gmapContext. - * - * @param center - LatLng of the center of the circle - * @param radius - radius in meters - * @param gmapContext - context - * @param options - */ - drawCircle: function(gmapContext, center, radius, options) { - if (gmapContext.circle != null) { - gmapContext.circle.setMap(null); - } - if (radius > 0) { - radius *= 1; - options = $.extend({ - strokeColor: "#0000FF", - strokeOpacity: 0.35, - strokeWeight: 2, - fillColor: "#0000FF", - fillOpacity: 0.20 - }, options); - options.map = gmapContext.map; - options.radius = radius; - options.center = center; - gmapContext.circle = new google.maps.Circle(options); - return gmapContext.circle; - } - return null; - }, - /** - * - * @param gMapContext - * @param location - * @param callback - */ - setPosition: function(gMapContext, location, callback) { - gMapContext.location = location; - gMapContext.marker.setPosition(location); - gMapContext.map.panTo(location); - this.drawCircle(gMapContext, location, gMapContext.radius, {}); - if (gMapContext.settings.enableReverseGeocode) { - gMapContext.geodecoder.geocode({latLng: gMapContext.location}, function(results, status){ - if (status == google.maps.GeocoderStatus.OK && results.length > 0){ - gMapContext.locationName = results[0].formatted_address; - } - if (callback) { - callback.call(this, gMapContext); - } - }); - } else { - if (callback) { - callback.call(this, gmapContext); - } - } - - }, - locationFromLatLng: function(lnlg) { - return {latitude: lnlg.lat(), longitude: lnlg.lng()} - } - } - - function isPluginApplied(domObj) { - return getContextForElement(domObj) != undefined; - } - - function getContextForElement(domObj) { - return $(domObj).data("locationpicker"); - } - - function updateInputValues(inputBinding, gmapContext){ - if (!inputBinding) return; - var currentLocation = GmUtility.locationFromLatLng(gmapContext.location); - if (inputBinding.latitudeInput) { - inputBinding.latitudeInput.val(currentLocation.latitude); - } - if (inputBinding.longitudeInput) { - inputBinding.longitudeInput.val(currentLocation.longitude); - } - if (inputBinding.radiusInput) { - inputBinding.radiusInput.val(gmapContext.radius); - } - if (inputBinding.locationNameInput) { - inputBinding.locationNameInput.val(gmapContext.locationName); - } - } - - function setupInputListenersInput(inputBinding, gmapContext) { - if (inputBinding) { - inputBinding.radiusInput.on("change", function() { - gmapContext.radius = $(this).val(); - GmUtility.setPosition(gmapContext, gmapContext.location); - }); - if (inputBinding.locationNameInput && gmapContext.settings.enableAutocomplete) { - gmapContext.autocomplete = new google.maps.places.Autocomplete(inputBinding.locationNameInput.get(0)); - google.maps.event.addListener(gmapContext.autocomplete, 'place_changed', function() { - var place = gmapContext.autocomplete.getPlace(); - if (!place.geometry) { - gmapContext.onlocationnotfound(); - return; - } - GmUtility.setPosition(gmapContext, place.geometry.location, function() { - updateInputValues(inputBinding, gmapContext); - }); - }); - } - } - } - - /** - * Initialization: - * $("#myMap").locationpicker(options); - * @param options - * @param params - * @returns {*} - */ - $.fn.locationpicker = function( options, params ) { - if (typeof options == 'string') { // Command provided - var _targetDomElement = this.get(0); - // Plug-in is not applied - nothing to do. - if (!isPluginApplied(_targetDomElement)) return; - var gmapContext = getContextForElement(_targetDomElement); - switch (options) { - case "location": - if (params == undefined) { // Getter - var location = GmUtility.locationFromLatLng(gmapContext.location); - location.radius = gmapContext.radius; - location.name = gmapContext.locationName; - return location; - } else { // Setter - if (params.radius) { - gmapContext.radius = params.radius; - } - GmUtility.setPosition(gmapContext, new google.maps.LatLng(params.latitude, params.longitude), function(gmapContext) { - updateInputValues(gmapContext.settings.inputBinding, gmapContext); - }); - } - break; - case "subscribe": - /** - * Provides interface for subscribing for GoogleMap events. - * See Google API documentation for details. - * Parameters: - * - event: string, name of the event - * - callback: function, callback function to be invoked - */ - if (options == undefined) { // Getter is not available - return null; - } else { - var event = params.event; - var callback = params.callback; - if (!event || ! callback) { - console.error("LocationPicker: Invalid arguments for method \"subscribe\"") - return null; - } - google.maps.event.addListener(gmapContext.map, event, callback); - } - - break; - } - return null; - } - return this.each(function() { - var $target = $(this); - // If plug-in hasn't been applied before - initialize, otherwise - skip - if (isPluginApplied(this)) return; - // Plug-in initialization is required - // Defaults - var settings = $.extend($.fn.locationpicker.defaults, options ); - // Initialize - var gmapContext = new GMapContext(this, { - zoom: settings.zoom, - center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude), - mapTypeId: google.maps.MapTypeId.ROADMAP, - mapTypeControl: false, - disableDoubleClickZoom: false, - scrollwheel: settings.scrollwheel, - streetViewControl: false, - radius: settings.radius, - locationName: settings.locationName, - settings: settings - }); - $(this).data("locationpicker", gmapContext); - // Subscribe GMap events - google.maps.event.addListener(gmapContext.marker, "dragend", function(event) { - GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(){ - var currentLocation = GmUtility.locationFromLatLng(gmapContext.location); - settings.onchanged(currentLocation, gmapContext.radius, true); - updateInputValues(settings.inputBinding, gmapContext); - }); - }); - GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(){ - updateInputValues(settings.inputBinding, gmapContext); - settings.oninitialized($target); - }); - // Set up input bindings if needed - setupInputListenersInput(settings.inputBinding, gmapContext); - }); - }; - $.fn.locationpicker.defaults = { - location: {latitude: 40.7324319, longitude: -73.82480799999996}, - locationName: "", - radius: 500, - zoom: 15, - scrollwheel: true, - inputBinding: { - latitudeInput: null, - longitudeInput: null, - radiusInput: null, - locationNameInput: null - }, - enableAutocomplete: false, - enableReverseGeocode: true, - onchanged: function(currentLocation, radius, isMarkerDropped) {}, - onlocationnotfound: function(locationName) {}, - oninitialized: function (component) {} - - } - -}( jQuery )); \ No newline at end of file