Google Maps Latitude and Longitude Picker jQuery plugin

A jQuery plugin that creates a location picker on your webpage using Google Maps.

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

This is a demo page; the newest live demo will always be here.
For the code, install instructions and to see how amazingly free it is, go to Github.
Also, you might find other interesting things on my blog at wimagguc.com.

The simplest form

After every position change you'll have the fresh lattitude, longitude and zoom values in the hidden fields.
The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.

Move the marker, or double click on the map.

<fieldset class="gllpLatlonPicker">
	<div class="gllpMap">Google Maps</div>
	<input type="hidden" class="gllpLatitude"/>
	<input type="hidden" class="gllpLongitude"/>
	<input type="hidden" class="gllpZoom"/>
</fieldset>

Simple form with a Google Maps search field and default values

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
If you don't give an ID to the map, the script generates one; feel free to use custom ID's though

Move the marker, or double click on the map. Search for cities, countries or landmark names.

<fieldset class="gllpLatlonPicker" id="custom_id">
	<input type="text" class="gllpSearchField">
	<input type="button" class="gllpSearchButton" value="search">
	<div class="gllpMap">Google Maps</div>
	<input type="hidden" class="gllpLatitude" value="60"/>
	<input type="hidden" class="gllpLongitude" value="30"/>
	<input type="hidden" class="gllpZoom" value="12"/>
</fieldset>

Reverse lookup: retrieves the location name once it's picked

After the position change you'll have the location name in the gllpLocationName field.
If there is no value, the field will be emptied.
The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.

Move the marker, or double click on the map.

<fieldset class="gllpLatlonPicker">
	<div class="gllpMap">Google Maps</div>
	<br/>
	<input type="hidden" class="gllpLatitude"/>
	<input type="hidden" class="gllpLongitude"/>
	<input type="hidden" class="gllpZoom"/>
	<input type="text" class="gllpLocationName" size=42/>
</fieldset>

Editable and selectable Latitude/Longitude values

You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.
You can still hide the Zoom field (or any other fields)

Move the marker, double click on the map, search, or set new values to interact.

<fieldset class="gllpLatlonPicker">
	<input type="text" class="gllpSearchField">
	<input type="button" class="gllpSearchButton" value="search">
	<br/><br/>
	<div class="gllpMap">Google Maps</div>
	<br/>
	lat/lon:
		<input type="text" class="gllpLatitude" value="20"/>
		/
		<input type="text" class="gllpLongitude" value="20"/>
	zoom: <input type="text" class="gllpZoom" value="3"/>
	<input type="button" class="gllpUpdateButton" value="update map">
</fieldset>

Created By Richard Dancsi

Blog, updates: http://www.wimagguc.com/
Twitter, everyday reads: wimagguc
Google+, hanging out: Richard Dancsi

This plugin has been used at http://divespy.com/

Divespy is built by Zenfield http://zenfield.com/

Wimagguc

Google Maps Latitude and Longitude Picker

The simplest form

Simple form with a Google Maps search field and default values

Reverse lookup: retrieves the location name once it's picked

Editable and selectable Latitude/Longitude values

Created By Richard Dancsi

Subscribe for code updates