Skip to content
Snippets Groups Projects
README.md 1.85 KiB
Newer Older
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
JQuery Location Picker plugin
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
=============================

![Location Picker](http://logicify.github.io/jquery-locationpicker-plugin/images/basic_ui.png)
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed

Brendan Nee's avatar
Brendan Nee committed
This plug-in allows finding and selecting a location on the Google map. Along with single point selection, it allows area selection by choosing a point and specifying a radius. The selection can be saved to any HTML input element or processed by Javascript with callback support.
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed

Brendan Nee's avatar
Brendan Nee committed
An optional automatic address resolver can reverse geocode the selection to an address. 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.
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed

Brendan Nee's avatar
Brendan Nee committed
Usage
-----
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed

Brendan Nee's avatar
Brendan Nee committed
The plug-in requires [jQuery](http://jquery.com/) and the [Google Maps API](https://developers.google.com/maps/). Integration is pretty simple:

* Add jQuery and Google Maps API to the `<head>` of your HTML file:
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
```
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
// be careful to include the parameter "libraries=places"
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
<script src="js/locationpicker.jquery.js"></script>
```

Brendan Nee's avatar
Brendan Nee committed
* Put container somewhere in your page's `<body>`:
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
```
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
<div id="somecomponent" style="width: 500px; height: 400px;"></div>
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
```

Brendan Nee's avatar
Brendan Nee committed
* Attach the plug-in to container:
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
```
<script>
Sykam Raju's avatar
Sykam Raju committed
$('#somecomponent').locationpicker();
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
</script>
```

Documentation and Examples
--------------------------

Documentation along with examples available [here](http://logicify.github.io/jquery-locationpicker-plugin/).

Dmitry Berezovsky's avatar
Dmitry Berezovsky committed

Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
Credits
-------
Dmitry Berezovsky's avatar
Dmitry Berezovsky committed
* Dmitry Berezovsky, Logicify (<http://logicify.com/>)
* Gennadiy Varava, Logicify (<http://logicify.com/>)
* Emanuele Coppola, Libre sc (<http://libreidee.com/>)
Emanuele's avatar
Emanuele committed