CodeCanyon

KWIK Location Picker

KWIK Location Picker

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"/>
by
by
by
by
by
by