Google Maps Latitude and Longitude Picker

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



Move the marker, or double click on the map.
Google Maps
<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



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


Google Maps
<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



Move the marker, or double click on the map.
Google Maps

<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



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


Google Maps

lat/lon: / zoom:
<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:

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

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

Subscribe for code updates

A rather infrequent newsletter about code updates, new free resources and every few months, a recap of the latest blog posts. Powered by MailChimp.