Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 embed the Javascript code within the HTML file it works without any problems. However if I try and run the javascript (with some alterations), as a separate file, the map loads upon opening my form, but when I enter the Lat and Lng co-ordinates and press the relevant button to Reverse Geocode, all that happens is that the map is refreshed.

I've attached the HTML file with the JS code embed and then the separate JS code file to make a comparison.

HTML file with embedded Javascript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var infowindow = new google.maps.InfoWindow();
  var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.730885,-73.997383);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeLatLng() {

    var lat = document.getElementById('Latitude').value;
    var lng = document.getElementById('Longitude').value;

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng, 
              map: map
          }); 
        var address= (results[1].formatted_address);
        document.getElementById('Address').value= results[1].formatted_address;
        infowindow.setContent(results[1].formatted_address);


          infowindow.open(map, marker);
        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script>
</head>
<body onLoad="initialize()">
<div>
  <input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
  <input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
  <input name="Address" type="text" id="Address" size="55" />
</div>
<div>
  <input type="button" value="Reverse Geocode" onClick="codeLatLng()">
</div>
<div id="map_canvas" style="height: 90%; top:60px; border: 1px solid black;"></div>
</body>
</html>

Javascript Code

(function ReverseGeocode() {

    //This is declaring the Global variables

    var geocoder, map, marker;

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

    window.onload = function() {

    //This is creating the map with the desired options 
        var myOptions = {
            zoom: 6,
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
            };

        map = new google.maps.Map(document.getElementById('map'), myOptions);
        var form = document.getElementById('SearchForLocationForm');

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

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

        // This is making the Geocode request
        geocoder.geocode({'latLng': latlng}, function(results, 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[1]) {
          // Creating a new marker and adding it to the map
            map.setZoom(16); 
          marker = new google.maps.Marker({
            map: map, draggable:true
          });
        }

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

        //This is placing the returned address in the 'Address' field on the HTML form  
        document.getElementById('Address').value= results[1].formatted_address;
                }
            }
);
    };
})();
like image 739
IRHM Avatar asked Jun 25 '11 16:06

IRHM


People also ask

How do you reverse a geocode?

Reverse geocoding can be carried out systematically by services which process a coordinate similarly to the geocoding process. For example, when a GPS coordinate is entered the street address is interpolated from a range assigned to the road segment in a reference dataset that the point is nearest to.

How can I reverse geocode for free?

Reverse Geocoding and Geolocation Service by Noggle is a free API that allows developers to embed the functionality to locate the largest city or nearest one to the latitude to longitude location. Another free reverse geocoding API is Opencage Geocoder by Opencage.

Is Google reverse geocoding free?

The Geocoding API uses a pay-as-you-go pricing model. Geocoding API requests generate calls to one of two SKUs depending on the type of request: basic or advanced. Along with the overall Google Terms of Use, there are usage limits specific to the Geocoding API.


1 Answers

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

function getReverseGeocodingData(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    // This is making the Geocode request
    var 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 proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var address = (results[0].formatted_address);
        }
    });
}

this is also needed, do not forget in head:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
like image 68
Sebastian Viereck Avatar answered Oct 13 '22 23:10

Sebastian Viereck