Search code examples
javascriptleafletgoogle-geocoder

Get and display lat long from address using Leaflet Control Search


I am using leaflet.js and this plugin: https://github.com/stefanocudini/leaflet-search and need a way of getting the lat and long coordinates from the address search and putting them into an input field, or just being able to use them...

The answer may well be in the code below, just can't figure out how to do it...

                var geocoder = new google.maps.Geocoder();

                function googleGeocoding(text, callResponse)
                {
                    geocoder.geocode({address: text}, callResponse);
                }

                function filterJSONCall(rawjson)
                {
                    var json = {},
                        key, loc, disp = [];

                    for(var i in rawjson)
                    {
                        key = rawjson[i].formatted_address;

                        loc = L.latLng( rawjson[i].geometry.location.lat(), rawjson[i].geometry.location.lng() );

                        json[ key ]= loc;   //key,value format
                    }

                    return json;
                }

                map.addControl( new L.Control.Search({
                        callData: googleGeocoding,
                        filterJSON: filterJSONCall,
                        wrapper: 'findbox',
                        markerLocation: true,
                        autoType: false,
                        autoCollapse: true,
                        minLength: 5,
                        zoom: 10,
                        initial: true,
                        collapsed: false,
                        tipAutoSubmit: false,
                        autoResize: false,
                        text: 'Enter an Address'
                    }) );

Solution

  • Inside the leaflet-search.js file you have a function called

    _getLocation(this._input.value)

    This function returns the information you need. You can see it's called inside the _handleSubmit function like this:

    var loc = this._getLocation(this._input.value);
    

    If you do:

    console.log("Latitude: " + loc.lat);
    console.log("Longitude: " + loc.lng);
    

    bellow this call in leaflet-search.js you will get the info you need in the console.

    I gave you the info you needed, now it's up to you to use it how you like. Make a public function then access it inside your code or whatever you want.