Nueva pregunta

Pregunta:

Fecha: 07-08-2016 07:41:52 (En Español)

Obtener el código postal de dirección desde Google Maps[Resuelta]

Desde la pregunta/información de Fernando .../base-de-datos-mysql-de-codigo-postal-argentino-cpa-por-provincia-y-localidad indicaba la posibilidad de obtener el código postal a partir de cualquier dirección con Google Maps.

Lo prometido es deuda.
El enlace (más ordenado y con estilos) pueden verlo en .../mapas/postal_code.html

El código reducido al máximo en estilos y otras hierbas es el siguiente:
<!DOCTYPE html>
<html lang="es-ES">

<head>
  <meta charset="utf-8">
  <title>Geocodificación código postal</title>
  <meta name="description" content="Geocodificación código postal">
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style>
*{
  margin: 0px;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  font-family:Trebuchet MS,verdana,arial;
  height:100%;
  background-color: #E1E1E1;
  font-size:1em;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup,main{
  display: block;
}
#mapa {
  width:98%;
  height: 400px;
  margin: 10px auto;
  padding: 10px;
  color: #1E1E1E;  
}
  </style>
  <script>
  var map, geocoder;

  function inicio() {
    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);
    geocoder = new google.maps.Geocoder();
  };

  function codeAddress() {
    var address = document.getElementById('address').value;
    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
        });
            for(var j=0;j < results[0].address_components.length; j++){
                for(var k=0; k < results[0].address_components[j].types.length; k++){
                    if(results[0].address_components[j].types[k] == "postal_code"){
                        zipcode = results[0].address_components[j].short_name;
						document.getElementById('CP').innerHTML = zipcode;
                    }
                }
            }
        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)
      }
    })
  };
  google.maps.event.addDomListener(window, 'load', inicio);
  </script>
</head>

<body>
  <header>
  </header>
  <section class="cuerpo">
    <div style="text-align:center;">
      <h4 style="margin: 0;padding: 0px;">Dirección a localizar con código postal en resultado</h4>
	  Escriba la dirección (texto) o coordenadas lat,lng separadas por coma (,):
      <br>
      <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>
      <h4> Código postal: <span style="color:#FF00AA;" id="CP"></span></h4>
      <input type="button" class="button" value="Localizar" onclick="codeAddress()"> </div>
  <div id="mapa"></div>
  </section>
  <div style="clear:both;"></div>
  <footer>
    <!-- Pie -->
    <!-- Fin pie -->
  </footer>
</body>


La pregunta del millón: Y ¿obtener la dirección (área) a partir de un número de Código Postal?.
Lo siento. De acuerdo a la nomenclatura de diversos países, muchos números de CP se repiten en diferente geografía.
Podríamos obtener resultados coordinando número de CP con el país solicitado.

Algunos desarrolladores lo hacen "para un país determinado".

Dejo abierta la pregunta para que compartan el resultado en diferentes países (toda teoría necesita comprobación y ensayo).

Saludos.
Etiquetas: Aporte - Geolocalización - Google Maps Votos: 2 - Respuestas: 3 - Vistas: 38 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 09-08-2016 09:26:38 Hola Fernando.

    Con tu último apunte en ...base-de-datos-mysql-de-codigo-postal-argentino-cpa-por-provincia-y-localidad me queda una duda sobre el código de Google Maps ya publicado sobre el Código postal.
    En mi caso (España) el resultado es el mismo, pero la estructura del Código Postal argentino puede arrojar resultados diferentes.

    En el código arriba punlicado, utilizaba la sentencia en Javascript, línea 65, (short_name) y Google Maps contempla también (siempre referidos al Código Postal) long_name

    ¿Hay diferencia en la utilización de una sentencia u otra en vuestro país?
    Para probarlo solamente tienes que cambiar el término.

    Me cuentas.
      Votos: 1 - Link respuesta
     
  • Fecha: 09-08-2016 14:33:48 Hola Txema, ejecuté el código y no me funcionó, cuando habrí el firebug, más precisamente la consola observé un error y dos warnings:

    Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
    Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
    Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

    Analizando el tema, veo que me falta la clave para API JavaScript (clave de navegador), aquí la info de como obtenerla: https://developers.google.com/maps/documentation/javascript/get-api-key#key

    Una vez generada la clave, la agregue como un parámetro en la API JavaScript:

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


    Y para evitar el segundo Warning SensorNotRequired, también quite el parámetro sensor=false.

    Una vez hecho esto, el código funcionó de maravillas.

    Ahora mis comentarios del caso con respecto a las propiedades short_name y long_name:

    Hice pruebas con direcciones de mi localidad (Argentina, Buenos Aires, Capital Federal, Calle ####) y en todos los casos ambas propiedades devolvieron el mismo valor. El valor almacenado es un código de 1 letra y 4 números, la prime letra se corresponde con la provincia y los siguiente 4 números con el código postal de la localidad.

    No quedando conforme con las pruebas, fui a la documentación para entender estos parametros, y me encontre con el siguiente JSON de ejemplo:

    {
       "results" : [
          {
             "address_components" : [
                {
                   "long_name" : "1600",
                   "short_name" : "1600",
                   "types" : [ "street_number" ]
                },
                {
                   "long_name" : "Amphitheatre Pkwy",
                   "short_name" : "Amphitheatre Pkwy",
                   "types" : [ "route" ]
                },
                {
                   "long_name" : "Mountain View",
                   "short_name" : "Mountain View",
                   "types" : [ "locality", "political" ]
                },
                {
                   "long_name" : "Santa Clara County",
                   "short_name" : "Santa Clara County",
                   "types" : [ "administrative_area_level_2", "political" ]
                },
                {
                   "long_name" : "California",
                   "short_name" : "CA",
                   "types" : [ "administrative_area_level_1", "political" ]
                },
                {
                   "long_name" : "United States",
                   "short_name" : "US",
                   "types" : [ "country", "political" ]
                },
                {
                   "long_name" : "94043",
                   "short_name" : "94043",
                   "types" : [ "postal_code" ]
                }
             ],
             "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
             "geometry" : {
                "location" : {
                   "lat" : 37.4224764,
                   "lng" : -122.0842499
                },
                "location_type" : "ROOFTOP",
                "viewport" : {
                   "northeast" : {
                      "lat" : 37.4238253802915,
                      "lng" : -122.0829009197085
                   },
                   "southwest" : {
                      "lat" : 37.4211274197085,
                      "lng" : -122.0855988802915
                   }
                }
             },
             "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
             "types" : [ "street_address" ]
          }
       ],
       "status" : "OK"
    }
    


    Por lo que podemos ver, la colección "results"->"address_components" utiliza la siguiente estructura para coleccionar todos los tipos (types):
              {
                   "long_name" : "XXXXXXXXXX",
                   "short_name" : "XXX",
                   "types" : [ "XXXXX", "XXXXXX" ]
                },
    

    Dicha estructura es utilizada para coleccionar todos los tipo (types) de resultados asociados a la direccion (address_components), donde en algunos casos tendrá sentido el long_name y short_name, y en otros no tanto, por ejemplo para "types" : [ "country", "political" ] tiene mucho sentido, no tanto para "types" : [ "street_number" ] o "types" : [ "postal_code" ].

    Creo que con esto queda aclarado el misterio :)

    Txema, Chapeau a tu aporte!.

    Saludos y buen código!
      Votos: 2 - Link respuesta
     
  • Fecha: 19-04-2018 03:25:12 Hola necesito desarrollar algo asi en mi pagina web, si pueden enviarme un mensaje a winerj@gmail.com
    Muchas gracias!
      Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión