Reverse Geocoding Code

December 05, 2023 Post a Comment

I've been working on putting together the Javavscript code for Reverse Geocoding in Google maps. I thought I'd solved all the issues I had, but I'm still having problems. When I em

Solution 1:

This is the short version of Khepri's (thank you!) Code

functiongetReverseGeocodingData(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    // This is making the Geocode requestvar geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceedingif (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var address = (results[0].formatted_address);
        }
    });
}

this is also needed, do not forget in head:

<scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=false"></script>

Solution 2:

I took what you had an modified it to something that functions for me...

Html

<!DOCTYPE html><html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no" /><metahttp-equiv="content-type"content="text/html; charset=UTF-8" /><title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title><linkhref="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"rel="stylesheet"type="text/css" /><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scriptsrc="/Scripts/test.js"type="text/javascript"></script></head><bodyonload="ReverseGeocode.Init()"><div><inputname="Latitude"type="text"id="Latitude"size="16"maxlength="10" /><inputname="Longitude"type="text"id="Longitude"size="16"maxlength="10" /><inputname="Address"type="text"id="Address"size="55" /></div><div><inputtype="button"value="Reverse Geocode"onclick="ReverseGeocode.ReverseCode()"></div><divid="map_canvas"style="height: 90%; top: 60px; border: 1px solid black;"></div></body></html>

This would be my test.js code below

varReverseGeocode = function () {

    //This is declaring the Global variablesvar geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    functionGeoCode(latlng) {

        // This is making the Geocode request
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {

            if(status !== google.maps.GeocoderStatus.OK)
            {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding    if (status == google.maps.GeocoderStatus.OK) {

                //This is placing the marker at the returned address    if (results[0]) {
                    // Creating a new marker and adding it to the map
                    map.setZoom(16);
                    marker = new google.maps.Marker({
                        map: map, draggable: true
                    });
                    marker.setPosition(latlng);
                    map.panTo(latlng);
                }

                var address = (results[0].formatted_address);

                //This is placing the returned address in the 'Address' field on the HTML form  document.getElementById('Address').value = results[0].formatted_address;
            }
        });

    }

    return {

        Init: function () {

            //This is putting the 'Latitude' and 'Longitude' variables //together to make the 'latlng' variable//var latlng = new google.maps.LatLng(lat, lng);var latlng = new google.maps.LatLng(40.730885, -73.997383);

            //This is creating the map with the desired options var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: 'roadmap'
            }

            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            GeoCode(latlng);
        },

        ReverseCode: function () {

            //This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML formvar lat = document.getElementById('Latitude').value;
            var lng = document.getElementById('Longitude').value;

            var latlng = new google.maps.LatLng(lat, lng);

            GeoCode(latlng);

        }
    };

} ();             // the parens here cause the anonymous function to execute and return

I basically replaced the window.onload handler you were using and set up the "object" with an init event that sets up the map initially. Then I just exposed a function that grabs the user entered lat/lng and called in to our geocode wrapper.

Should work with little modification (outside of copious amounts of error handling that I skipped :-p ) for you.

JavaScript Exercises

Reverse Geocoding Code

Solution 1:

Solution 2:

Post a Comment for "Reverse Geocoding Code"