diff --git a/README.md b/README.md index 35eae20..faaae36 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ The plug-in requires [jQuery](http://jquery.com/) and the [Google Maps API](http * Add jQuery and Google Maps API to the `
` of your HTML file: ``` +// be careful to include the parameter "libraries=places" ``` @@ -39,4 +40,6 @@ Documentation along with examples available [here](http://logicify.github.io/jqu Credits ------- -Dmitry Berezovsky, Logicify (+
-
+Providing options
+<div id="somecomponent" style="width: 500px; height: 400px;"></div> <script> $('#somecomponent').locationpicker({ location: {latitude: 46.15242437752303, longitude: 2.7470703125}, - radius: 300 - }); -</script> + radius: 300, + markerIcon: 'http://www.iconsdb.com/icons/preview/tropical-blue/map-marker-2-xl.png' +}); +</script>-Result
+Result
+ + + + }); + -Binding UI with the widget
-+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> +<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}, + location: {latitude: 46.15242437752303, longitude: 2.7470703125}, radius: 300, inputBinding: { latitudeInput: $('#us2-lat'), @@ -57,106 +66,130 @@-Binding UI with the widget
locationNameInput: $('#us2-address') } }); -</script> +</script>Result:
+Result:
--+ -- ++ ++- ++ - --- +++ +++ - -- --- ++ ++ ++++ - - +- -+ ++ - -+ ++Subscribing for events
+Subscribing for events
-The following example illustrates how to subscribe "Change" event. See the list of the available events along - with functions signature above.
-+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}, +location: {latitude: 46.15242437752303, longitude: 2.7470703125}, radius: 300, inputBinding: { latitudeInput: $('#us3-lat'), longitudeInput: $('#us3-lon'), radiusInput: $('#us3-radius'), - locationNameInput: $('#us3-address') + locationNameInput: $('#us3-address') }, enableAutocomplete: true, onchanged: function(currentLocation, radius, isMarkerDropped) { alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")"); -} +}--+- ++ + ++-+ - --- +++ +++ - -- --- ++ ++ ++++ - - +- - -+ ++ - -Manipulating map widget from callback
++ ++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.+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, @@ -165,26 +198,29 @@-Manipulating map widget from callback
mapContext.map.setZoom(20); }- - -++ + +-Advanced usage of geo decoder features
+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. -
-++ 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); @@ -205,87 +241,90 @@-Advanced usage of geo decoder features
} });--- - ----+ diff --git a/examples/mapInModalDialog.html b/examples/mapInModalDialog.html index a03aa6c..7502303 100644 --- a/examples/mapInModalDialog.html +++ b/examples/mapInModalDialog.html @@ -1,5 +1,6 @@ + @@ -12,68 +13,84 @@- - -- -- -++-+- - -+ +-- ++ +++ + +++ --- --- +++ +++ --- --- +++ +++ --- --- +++ +++ + +++ +++ -- ++ +++-Credits
Dmitry Berezovsky, Logicify (http://logicify.com/)-+Credits
- Dmitry Berezovsky, Logicify (http://logicify.com/)Simple example + - ---