jQuery Latitude and Longitude Picker for Google Maps

1.1.0

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)

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:

• jquery.com
• developers.google.com/maps

Special thanks

• To @Beanow for his suggestions

About

Richard Dancsi

• Blog: wimagguc.com
• Twitter: twitter.com/wimagguc
• Linkedin: linkedin.com/in/richarddancsi
• Google+: plus.google.com/u/0/115939246085616544919