Código de geocodificación inversa

He estado trabajando para armar el código de Javavscript para geocodificación inversa en Google Maps. Pensé que había resuelto todos los problemas que tenía, pero todavía tengo problemas.Código de geocodificación inversa

Cuando incrusto el código de Javascript dentro del archivo HTML, funciona sin ningún problema. Sin embargo, si intento ejecutar el JavaScript (con algunas modificaciones), como un archivo separado, el mapa se carga al abrir mi formulario, pero cuando ingreso las coordenadas Lat y Lng y presiono el botón correspondiente para invertir el Geocodigo, todo lo que sucede es que el mapa se actualiza.

He adjuntado el archivo HTML con el código JS incrustado y luego el archivo de código JS por separado para hacer una comparación.

archivo HTML con Javascript incrustada

<!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>

Código Javascript

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

Fuente

2011-06-25 IRHM

Esta es la versión corta del Código de Khepri (¡gracias!)

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

esto también se necesita, no se olvide de la cabeza:

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

Fuente

2013-05-04 01:39:13 slaver113

Tomé lo que había que una modificación a algo que funciona para mí ...

HTML

<!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 src="/Scripts/test.js" type="text/javascript"></script>  
</head> 
<body onload="ReverseGeocode.Init()"> 
    <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="ReverseGeocode.ReverseCode()"> 
    </div> 
    <div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;"> 
    </div> 
</body> 
</html>

Esto sería mi código Test.js continuación

var ReverseGeocode = function() { 

    //This is declaring the Global variables 

    var geocoder, map, marker; 

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

    function GeoCode(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 form 
      var 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

básicamente sustituye al controlador de window.onload que estaba usando y configurar el "objeto" con un evento init que establece el mapa inicialmente. Luego expuse una función que captura al usuario ingresado lat/lng y llamado a nuestro contenedor de geocódigo.

Debería funcionar con pequeñas modificaciones (aparte de cantidades copiosas de errores que me salté :-p) para usted.

Fuente

2011-06-25 17:32:15 Khepri

Hola, sincero agradecimiento por su respuesta y la código. Lo he intentado y, lamentablemente, no puedo hacer que ocurra nada cuando hago clic en el botón 'Reverse Geocode'. Alguna idea, por favor? ACTUALIZACIÓN - He logrado que esto funcione, solo faltó un punto y coma. Muchas gracias por su ayuda. Saludos cordiales – IRHM

He cargado el ejemplo anterior para usted. http://www.guilette.net/Example.zip Simplemente extraiga y ejecute, y funcionará. (Para su información, este es mi dominio personal. Si no se siente cómodo tomando el archivo de allí, hágamelo saber y pondré el archivo donde prefiera) EDITAR: ¡Me alegra que lo haya conseguido! – Khepri

Código de geocodificación inversa

Respuesta

Cuestiones relacionadas