Reverse Geocoding Code
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 returnI 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.
Post a Comment for "Reverse Geocoding Code"