JQuery Location Picker is a tiny Javascript plug-in developed by Logicify team for finding and selecting a location on Google Maps. 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).

Today I would like to share a tiny JQuery plug-in we developed.

It 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.

Usage is pretty simple:

 <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>
 .......
 <div id="somecomponent" style="width: 500px; height: 400px;"> </div>
 <script>
 $('somecomponent').locationpicker();
 </script>

Plug-in is distributed under MIT license and is available on Github. Documentation and demos are here: http://logicify.github.io/jquery-locationpicker-plugin/#usage

Screenshot with Location Picker

Related articles

Tags