GeoSuggester

GeoSuggester is a rapid way of enhance user experience when filling geographic data into forms.

It provides a Google Map canvas as a drop-down element: user may auto-complete their address string by pressing 'enter' or clicking on the marker on the map.

See documentation for reference: http://geosuggester.panaghia.it/doc

How to use

Put your input element inside a container with position style expressely declared (fixed, relative or absolute).

<div id="GeoSuggesterContainer" style="position:relative">
	<input type="text" id="city" value="insert here" />
</div>

Then declare an instance of GeoSuggester class in your code

var geo = new GeoSuggester({
	inputItem: 'city',
	container: 'GeoSuggesterContainer',
	initText: "Please, provide a street address",
	rollHeight: 400,
	baloonMsg: 'Right location?<br/>Press enter!',
	customClass: '_map_canvas',
	delay: 1000,
	onSelect: function()
	{
		//fires when user select a location
		document.id('postalCode').set('value', geo.getPostalCode());
		//see documentation for function reference
	},
	onClear: function()
	{
		document.id('city').set('value', '');
		//fires when users press esc (in input context)		
	}		
});

Screenshots

Resources

Check GeoSuggester Wiki on GitHub and official minisite (http://geosuggester.panaghia.it).