GeoSuggester 0.5

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



Details

Author
Sergio Panagia
Current version
0.5
GitHub
panaghia/GeoSuggester
Downloads
12054
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Element.Event
    • Fx.Tween
    • Element.Style
    • Element.Dimensions
    • String
    • Array
    • Google Maps API V3

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)     
    }       
});

Resources

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


Screenshots


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus