Kwik Location Picker allows you to easily find and obtain the address details of a location on a Google map by dragging a map marker to a desired location.
The Kwik Location Picker returns a data object containing the formatted address, latitude, longitude and the Google map âplace_idâ meaning the data can be saved to HTML input element/s for processing.
Note: The Kwik Location Picker requires an Google API Key.
After downloading KWIK Location Picker (here) upload the files to your host server. Logically stylesheet CSS files go into your css folder, and the javascript files into your js folder.
The KWIK Location Picker download is structured like this:
kwik_location_picker_v1_0_0
css
kwik-location.css
js
jquery.min.js
kwik-location-picker.js
example.html
Copy-paste the stylesheet <link>âs into the <head> of your web page. Make sure they are in the following order:
<link rel=âstylesheetâ type=âtext/cssâ href=âpath_to/css/any style sheets you currently useâ>
<link rel=âstylesheetâ type=âtext/cssâ href=âpath_to/css/kwik-location.cssâ>
Add the JavaScript pages near the end of your pages, right before the closing </body> tag. Make sure they are in the following order:
<script type=âtext/javascriptâ src=âhttps://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]â></script>
<script type=âtext/javascriptâ src=âpath_to/js/jquery.min.jsâ></script>
<script type=âtext/javascriptâ src=âpath_to/js/any other JavaScript pages/jQuery plugins you currently useâ></script>
<script type=âtext/javascriptâ src=âpath_to/js/your site javascript page.jsâ></script>
<script type=âtext/javascriptâ src=âpath_to/js/kwik-location-picker.jsâ></script>
And thatâs it all you need to do now is create an HTML element on your page to display your Kwik Location Picker â example:
<input type="text" id="my_kwik_location_picker_HTML_element" placeholder="Click to obtain an address"/>
Share This Product