Skip to content
A jQuery plugin that creates a Latitude and Longitude picker using Google Maps.
HTML CSS

README.md

jQuery Latitude and Longitude Picker for Google Maps

1.1.1

A jQuery Latitude and Longitude plugin to pick a location using Google Maps.

Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.

Check out the live demos.

Features

Basic functions

  • Move the marker on the map to receive the updated latitude, longitude and zoom values in the hidden fields

  • "location_changed" event will be fired, with the gllLatlonPicker Node JS object as attribute for easy access

Map with location search field:

  • If the search has results, the first element will appear on the map (with the default zoom value 11)

  • You can set default latitude, longitude and zoom values in the hidden fields

  • Use any custom id you want

Map with reverse lookup:

  • WHen the position changes the location's name will be returned

  • The "location_changed" event will also be fired with the gllLatlonPicker Node JS object as attribute

  • To disable this, you can set queryLocationNameWhenLatLngChanges param to false

Adjust latitude, longitude and zoom fields on the fly:

  • Set any default latitude, longitude and zoom values. The map shows your data after pressing the update button.

  • Any fields can be hidden or visible fields to ease user input

Get started

Import jQuery and Google Maps:

  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Import the plugin:

  <link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
  <script src="js/jquery-gmaps-latlon-picker.js"></script>

Add a HTML markup:

  <fieldset class="gllpLatlonPicker">
    <input type="text" class="gllpSearchField">
    <input type="button" class="gllpSearchButton" value="search">
    <div class="gllpMap">Google Maps</div>
    <input type="hidden" class="gllpLatitude" value="20"/>
    <input type="hidden" class="gllpLongitude" value="20"/>
    <input type="hidden" class="gllpZoom" value="3"/>
  </fieldset>

(See more options in the demos)

Customize default settings

If you want to modify the default parameters, you need to disable the auto-init procedure first. You can do this by adding the following code when importing the plugin scripts:

  <link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
  <script>
    $.gMapsLatLonPickerNoAutoInit = 1;
  </script>
  <script src="js/jquery-gmaps-latlon-picker.js"></script>

Then copy the init code from "jquery-gmaps-latlon-picker.js" and extend it. Here is an example:

<script>
  $(document).ready(function() {
    // Copy the init code from "jquery-gmaps-latlon-picker.js" and extend it here
    $(".gllpLatlonPicker").each(function() {
      $obj = $(document).gMapsLatLonPicker();

      $obj.params.strings.markerText = "Drag this Marker (example edit)";

      $obj.params.displayError = function(message) {
        console.log("MAPS ERROR: " + message); // instead of alert()
      };

      $obj.init( $(this) );
    });
  });
</script>

License

MIT, do-with-the-code-whatever-you-please License

This code uses the jQuery Javascript library and the Google Maps API. To read more about these, go to:

Special thanks

  • To @Beanow for his suggestions
  • To @famzah for the easy-to-customise default settings code

About

Richard Dancsi

Something went wrong with that request. Please try again.