Marcadores posicionados mediante geocodificación
- Informática

Introducción a Google Maps APIv3 (parte 7): añadir marcadores geocodificando direcciones

Introducción

En entradas anteriores vimos cómo añadir múltiples marcadores a un mapa creado con la API de Google Maps. En esta ocasión veremos como hacer lo mismo, pero utilizando direcciones formateadas en lugar de coordenadas para indicar la posición de cada uno de los marcadores en el mapa.

La codificación geográfica es el proceso de transformar direcciones (como “Carrer de la Canuda, 6, Barcelona”) en coordenadas geográficas (como 41.385064 de latitud y 2.173404 de longitud), que se pueden utilizar para colocar marcadores o situar el centro del mapa.

Usar la codificación geográfica de Google Maps

Para conseguirlo, en primer lugar crearemos un array de strings en el que almacenaremos las diferentes direcciones.

var addressArray = new Array("Carrer de la Canuda, 6, Barcelona",
        "Av. de la Constitución, s/n, 41004 Sevilla",
        "Praza do Obradoiro, s/n, 15704 Santiago de Compostela, A Coruña");

 

A continuación creamos una variable a la que asignaremos el geocoder() de Google Maps.

var geocoder = new google.maps.Geocoder();

 

También debemos crear una variable en la que posteriormente almacenaremos el resultado de la geocodificación de cada dirección.

var markerBounds = new google.maps.LatLngBounds();

 

Para crear los tres marcadores, debemos utilizar un bucle para recorrer las diferentes posiciones del array. También es conveniente controlar un posible error en la geocodificación de las direcciones. Ese error lo controlamos con una estructura de selección if/else en la que, si la geocodificación funciona, se crea el marcador y si la geocodificación falla se muestra un mensaje de error. En el caso de que funcione sólo una o dos de las direcciones, éstas se mostrarán en el mapa, obviándose la/s que provocan el error, previa visualización del mensaje de error.

for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({map: mapa,position: results[0].geometry.location});
            markerBounds.extend(results[0].geometry.location);
            mapa.fitBounds(markerBounds);
            } else {
            alert("El geocoder no ha funcionado por: " + status);
            }
        });
    }

El error devuelve la variable status que puede indicar según el caso:

  • ZERO_RESULTS indica que la codificación geográfica se ha realizado correctamente pero no ha devuelto ningún resultado. Esto puede ocurrir si en la codificación geográfica se incluye una dirección inexistente o un valor latng en una ubicación remota.
  • OVER_QUERY_LIMIT indica que se ha excedido el cupo de solicitudes.
  • REQUEST_DENIED indica que se ha denegado la solicitud por algún motivo.
  • INVALID_REQUEST normalmente indica que no se ha especificado la solicitud (address o latLng).

El resultado final se puede ver en la siguiente imagen:

Marcadores posicionados mediante geocodificación

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

5 thoughts on “Introducción a Google Maps APIv3 (parte 7): añadir marcadores geocodificando direcciones

  1. Buen dia, soy estudiante de ingeniería de sistemas, y para un proyecto estoy necesito usar una APIMAPS por lo cual me intersa la información de la pagina, es mi primera vez trabajando con esa parte de integración de Maps por lo cual seguí las introducciones, sin embargo al momento de ejecutarla abre el mapa y muestra los marcadores con las coordenadas que le asigne pero en cuestion de 1 minuto se cierra y arroja el siguiente error “Esta página no ha cargado Google Maps correctamente. Descubre los detalles técnicos del problema en la consola de JavaScript.”, agradezco la colaboración como puedo solucionarlo y que muestre el mapa sin problemas.

    Gracias,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.