Código de JavaScript - Geocoding con Google Maps

Imágen de perfil

Geocoding con Google Mapsgráfica de visualizaciones


JavaScript

Publicado el 19 de Enero del 2015 por txema
1.737 visualizaciones desde el 19 de Enero del 2015. Una media de 21 por semana
¿Cómo obtener las coordenadas de una dirección completa y mostrarlas en un mapa?

O tal vez teniendo las coordenadas, ¿Cómo saber la dirección? (geocodificación inversa).

Se presenta la página completa en HTML5 si bien el desarrollo propiamente dicho corrresponde a Javascript, de la mano de Google Maps.

Requerimientos

Llamada a Google Maps
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=es"></script>

3.18

Actualizado el 20 de Enero del 2015 (Creado el 19 de Enero del 2015)gráfica de visualizaciones de la versión: 3.18
1.738 visualizaciones desde el 19 de Enero del 2015. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Google Maps Geocodificación simple">
    <title>Google Maps Geocodificación simple</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=es"></script>
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;font-family:Trebuchet MS,verdana,arial}
#mapa{width:70%;height:100%;float:right}
#texto{width:25%;height:100%;float:left;vertical-align:middle;padding:2%}
#texto input.navi{font-size:18px;width:90%;height:30px;margin-bottom:10px}
</style>
<script type="text/javascript">
//<![CDATA[
var map, geocoder;
window.onload = function () {
  var latlng = new google.maps.LatLng(48.8656182, 2.3031914);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
  // llama a la funcion
  geocoder = new google.maps.Geocoder();
};
 
function codeAddress() {
  var address = document.getElementById('address').value;
  // Función completa de Geocoding
  geocoder.geocode({
    'address': address
	// 'latLng': latlng si lo que queremos ejecutar en geocodificación inversa
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      document.getElementById('x').innerHTML = results[0].geometry.location.lat().toFixed(6);
      document.getElementById('y').innerHTML = results[0].geometry.location.lng().toFixed(6);
      map.setCenter(results[0].geometry.location);
      document.getElementById('direccion').innerHTML = results[0].formatted_address;
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      infowindow = new google.maps.InfoWindow({
        content: results[0].formatted_address + '<br> Latitud: ' + results[0].geometry.location.lat().toFixed(6) + '<br> Longitud: ' + results[0].geometry.location.lng().toFixed(6)
      });
      infowindow.open(map, marker)
    }
	// Se detallan los diferentes tipos de error
	else {
      alert('Geocode no tuvo éxito por la siguiente razón: ' + status)
    }
  })
};
//]]>
</script>
  </head>
  <body>
	<section id="texto">
	  <h3>Dirección a localizar</h3>
	  <p>Sobreescriba la dirección<br>puede indicar coordenadas lat,lng separadas por coma (,):</p>
      <input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección o Lat, Lng" />
      <br>
      Latitud: <span style="color:#FF00AA;" id="x"></span>
      <br>
      Longitud: <span style="color:#FF00AA;" id="y"></span>
      <br>
      Dirección completa:<br><span style="color:#FF00AA;" id="direccion"></span>
      <br>
      <input type="button" class="navi" value="Localizar" onclick="codeAddress()">
    </section>
    <div id="mapa"></div>
  </body>
</html>



Comentarios sobre la versión: 3.18 (0)


No hay comentarios
 

Comentar la versión: 3.18

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3009