Código de JavaScript - Geocoding con Google Maps

Imágen de perfil
Val: 134
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Geocoding con Google Mapsgráfica de visualizaciones


JavaScript

Publicado el 19 de Enero del 2015 por Txema (7 códigos)
5.452 visualizaciones desde el 19 de Enero del 2015
¿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

Publicado el 19 de Enero del 2015gráfica de visualizaciones de la versión: 3.18
5.453 visualizaciones desde el 19 de Enero del 2015
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3009