Tutorial de la API de Google Maps

7
63055

Utilizando el API de Google Maps

Introducción

Ya hemos visto en otros tutoriales
como éste
un ejemplo de lo sencillo que es trabajar con el API de Google Maps.
Hoy vamos a realizar otro sencillo ejemplo que básicamente va
a tener:

  • Un buscador de direcciones que mostrará el resultado en el mapa de Google Maps.

  • Posiblidad de modificar manualmente el resultado (veremos que quiere decir ésto).

  • Generación de el código para el fichero de tipo kml: un
    lenguaje
    de marcado
    basado en
    XML para representar datos geograficos en tres dimensiones
    desarrollado para ser manejado con Google Earth.

Que
vamos a utilizar

Básicamente vamos a utilizar
dos clases del API de Google Maps:

  • La clase Gmap2: Es la clase
    principal del API y la que nos permite pintar el mapa.

  • La clase GClientGeocoder: Esta
    clase se utiliza para comunicar directamente con los servidores de
    Google y poder obtener los geocodes para las direcciones
    especificadas por un usuario. Además, un geocoder mantiene su
    propia cache de direcciones, que permite que las preguntas repetidas
    sean contestadas sin un viaje de ida y vuelta al servidor.

Podéis consultar el API de
Google Maps aquí.

Antes
de empezar

Hay que tener en cuenta que debemos
registrarnos en Google Maps para conseguir la clave, como se explica
aquí,
e importar las clases de Google Maps de la siguiente manera:

<script
src="http://maps.google.com/maps?file=API&amp;v=2.x&amp;key=NUESTROCHORRODECLAVEGENERADAPORGOOGLEMAPS"
type="text/javascript"></script>

Creando
el mapa y el cliente de geocoder

Lo primero que tenemos que hacer es
crear el mapa y el cliente de geocoder:

var map; 
var geocoder; 
function initialize() { 
  map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(40.452557, -3.510673), 15); 
  // insertar los controles 
  map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); 
  geocoder = new GClientGeocoder(); 
} 

Al constructor de Gmap2 debemos
pasarle un como parametro un contenedor HTML, que generalmente será
un DIV. Además se le puede pasar parámetros opcionales
como el tipo de mapa, etc. lo podeis consultar en el API.

Luego estamos estableciendo las
coordenadas en las que queremos centrar inicialmente el mapa, y el
nivel de zoom.

Insertamos los controles para
cambiar el tipo de mapa (Mapa, Satelite o Hibrido) y el controlador
de zoom y movimiento.

Finalmente creamos el objeto que
nos ayudara a buscar en el mapa.

Implementando
la búsqueda

Vamos a ver las funciones para la
búsqueda:

function showLocation() {
  var address = document.forms[0].q.value;
  geocoder.getLocations(address, addAddressToMap);
}

La función getLocations es
la que nos permite realizar búsquedas de una dirección
en el mapa. Así de simple. Debemos pasarle la dirección
y el nombre de la función que se ejecutará al recibir
la respuesta del servidor, que es

donde debemos programar toda la
chicha de nuestra página. Os muestro un ejemplo a
continuación:

function addAddressToMap(response)
{
  map.clearOverlays();
  if (!response || response.Status.code != 200) {
    alert("Lo sentimos, no se ha encontrado su direcci&ocute;n");
  } else {
    place = response.Placemark[0];
    point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); 

    map.setCenter(point, 15);
    marker = new GMarker(point);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(place.address);
    document.getElementById("punto").value = marker.getLatLng().toUrlValue();
    generateKML(place.address,
    place.Point.coordinates[0], place.Point.coordinates[1]);
  }
}

Lo primero que se hace es limpiar
el mapa. Comprobamos si la respuesta es correcta, es decir, se ha
encontrado la dirección. En el caso afirmativo toda la
información se encuentra en el objeto respuesta.

Nos puede devolver uno o mas
objetos PlaceMark, que son los objetos que recogen toda la
información de las localizaciones de los resultados obtenidos.

Como vemos, recogemos el primer o
único resultado, definimos un punto con las coordenadas
geograficas de longitud y latitud, establecemos el centro de nuestro
mapa en ese punto, estableciendo un zoom de nivel 15.

A continuación creamos una
marca en ese mismo punto y la añadimos al mapa, rellenamos la
ventana de información con la dirección obtenida,
mostramos las coordenadas en un textbox y generamos el codigo KML
correspondiente.

Generando
el codigo para el fichero KML

Aquí
podemos ver algunos ejemplos de ficheros KML, nosotros hemos
utilizado el ejemplo mas sencillo para generar nuestro KML
personalizado. El código javascript que lo genera es el
siguiente:

function generateKML(description, lng, lat){
  document.getElementById("kml").value = '';
  var kml = '\n';
  kml = kml + '\n';
  kml = kml + '\n';
  kml = kml + '\t' + document.getElementById("empresa").value + '\n';
  kml = kml + '\t' + description + '\n';
  kml = kml + '\t' + lng + ',' + lat + ',0\n';
  kml = kml + '\n';
  kml = kml + '\n'
  document.getElementById("kml").value = kml;
}

Lo mas destacable son las
coordenadas (longitud, latitud, altitud) para que Google Earth pueda
encontrarlas en el mapa.

Un ejemplo de KML generado sería el siguiente:




	Autentia
	Av de Castilla 2, 28830 San Fernando de Henares, Spain
	-3.510673,40.452557,0


Añadiendo
la funcionalidad para poder modificar manualmente el resultado de la
búsqueda

Queremos conseguir poder arrastrar
con el ratón la marca del resultado de la búsqueda de
nuestra dirección, esto lo conseguimos modificando el código
de la función addAddressToMap(response) de la
siguiente manera:

.....
marker = new GMarker(point, {draggable: true});
  GEvent.addListener(marker, "dragstart", function() {
  map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
  document.getElementById("punto").value = marker.getLatLng().toUrlValue();
  marker.openInfoWindowHtml(place.address);
  generateKML(place.address, marker.getLatLng().lng(), marker.getLatLng().lat());
}
....

Al crear la marca con la opción
draggable:true le estamos indicando a Google Maps que queremos poder
moverla por el mapa. Debemos entonces añadir dos Listener a la
marca, una para el “dragstart”, que como su nombre indica

se lanzara en el momento que
empiece el arrastre, y otro para el “dragend”, que se
lanzará en el momento que finalice el arrastre.

En el “dragstart” lo
único que hacemos es cerrar la ventana de información

En el “dragend”
actualizamos el textbox que muestra las coordenadas, mostramos de
nuevo la ventana de información con la dirección y
generamos de nuevo el KML con las nuevas coordenadas, muy sencillo.

Código
completo

A continuación os dejo el código
y una imagen que muestra el resultado obtenido.

Conclusión

Los chicos de Google han hecho las
cosas bien (como siempre) y el API de Google Maps es facil de utilizar y está
bien documentado.


Espero que este tutorial os sirva de ayuda para
vuestros primeros contactos con este API.

7 COMENTARIOS

  1. Gracias por el tuto esta muy weno y todo funciona ok
    pero me sale un error al ver el codigo con el programa phpDesigner en esta linea 77:
    kml = kml + \\\’\\\
    \\\’;

    error: syntax error unexpected T_STRING

    no se si esto afectara en algo pero le aviso de todas formas
    Salu2!

  2. hola lo que pasa es q no me mmuestra el sitio que le doy en el edit buscar, no sesi esporque tengo muchos div pero al igual yo especifico bien al q le voy a pasar por parametro,y lo esty utilizando en mi propia eb, porque en la del auto funciona bien quien me podra aydar

    • Puede ser algo complejo si te refieres a una aplicación de escritorio de Java ya que puede resultar difícil pintar los mapas. En cualquier caso, en este enlace puedes encontrar la documentación actualizada para desarrollar en Android, iOS y Web.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad