A lo largo de estos dos artículos veremos a grandes rasgos cómo funciona este servicio de Google y realizaremos una pequeña introducción a la API a través de un ejemplo simple de integración de un mapa en nuestra página web.
Uno de los últimos servicios del gigante Google que más ha dado que hablar es Google Maps. En un navegador, y a golpe de clic el usuario puede darse una vuelta virtual por el mundo, disfrutando de fotos aéreas de gran calidad en algunas zonas, y del mapeado vectorial completo de otras. Pero lo interesante del servicio es que Google ofrece una API (Application Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en su propia página, de forma simple y gratuita. A lo largo de este artículo veremos los fundamentos para integrar Google Maps en nuestro website y a través de un ejemplo crearemos un primer mapa usando las funcionalidades más básicas de la API.
La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e intuitiva. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este artículo en el planteamiento AJAX, sin embargo es conveniente hacer una breve reseña para conocer a grandes rasgos su funcionamiento.
AJAX no es una nueva tecnología, sino una combinación de tecnologías ya existentes para ofrecer una nueva visión a la hora de crear aplicaciones web. Siguiendo un planteamiento AJAX, usaremos CSS y DHTML para la presentación de los datos, el DOM (Document Object Model) para tratar dinámicamente la presentación de estos datos, XML y XSLT para el correcto intercambio y manipulación de la información, XMLHttpRequest para obtener la información de manera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un "motor" javascript entre la presentación y el servidor, que nos hará peticiones de información de forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página, sin necesidad de recargarla y hacer una nueva petición de página completa al servidor.
A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sin duda ofrece grandes posibilidades, como las que podemos ver en práctica con Google Maps. Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.
Como vimos anteriormente en la introducción de este artículo, Google nos permite usar Google Maps en nuestra página web de forma gratuita. A continuación veremos cómo hemos de proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos ofrece.
Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y un servidor público podemos empezar a crear mapas en nuestro dominio. Es importante reseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público, entre otras razones porque Google monitorizará el uso que hagamos del mapa, de acuerdo con sus términos y condiciones de uso.
El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos concede cuando nos damos de alta en el servicio. Esta clave es única para cada usuario de Google Maps y es restrictiva en lo que se refiere a su uso, ya que sólo nos permite usar los scripts en uno de los directorios de nuestro servidor.
Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introducción a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
</script>
</body>
</html>
Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa, que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá:
Como se puede ver en el código, hemos creado una única capa con id="map" destinada a contener nuestro Google Map. El script que viene a continuación de la declaración de esta capa es el que genera el mapa. Veamos sentencia a sentencia qué hace el código:
La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e intuitiva. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este artículo en el planteamiento AJAX, sin embargo es conveniente hacer una breve reseña para conocer a grandes rasgos su funcionamiento.
AJAX no es una nueva tecnología, sino una combinación de tecnologías ya existentes para ofrecer una nueva visión a la hora de crear aplicaciones web. Siguiendo un planteamiento AJAX, usaremos CSS y DHTML para la presentación de los datos, el DOM (Document Object Model) para tratar dinámicamente la presentación de estos datos, XML y XSLT para el correcto intercambio y manipulación de la información, XMLHttpRequest para obtener la información de manera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un "motor" javascript entre la presentación y el servidor, que nos hará peticiones de información de forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página, sin necesidad de recargarla y hacer una nueva petición de página completa al servidor.
A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sin duda ofrece grandes posibilidades, como las que podemos ver en práctica con Google Maps. Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.
Como vimos anteriormente en la introducción de este artículo, Google nos permite usar Google Maps en nuestra página web de forma gratuita. A continuación veremos cómo hemos de proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos ofrece.
Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y un servidor público podemos empezar a crear mapas en nuestro dominio. Es importante reseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público, entre otras razones porque Google monitorizará el uso que hagamos del mapa, de acuerdo con sus términos y condiciones de uso.
El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos concede cuando nos damos de alta en el servicio. Esta clave es única para cada usuario de Google Maps y es restrictiva en lo que se refiere a su uso, ya que sólo nos permite usar los scripts en uno de los directorios de nuestro servidor.
Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introducción a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
</script>
</body>
</html>
Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa, que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá:
Como se puede ver en el código, hemos creado una única capa con id="map" destinada a contener nuestro Google Map. El script que viene a continuación de la declaración de esta capa es el que genera el mapa. Veamos sentencia a sentencia qué hace el código:
- var map = new GMap(document.getElementById("map"));
Esta sentencia genera el mapa especificando como destino el id="map" que hemos asignado previamente para nuestra capa contenedora. Nótese que el mapa se adaptará al tamaño que hayamos especificado para esta capa.
- map.setMapType(G_SATELLITE_TYPE);
setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir entre las vistas "Map" (mapa vectorial), "Satellite" (fotografía de satélite) y "Hybrid" (combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapas vectoriales para España, hemos elegido la vista de satelite que nos muestra la fotografía aérea de la zona.
- map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
addControl nos permite incorporar elementos de control al mapa, tal y como son el control de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendo de nuestras necesidades podemos incorporar estos controles, o incluso versiones de menor tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto el mapa se muestra sin controles.
- map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre, mediante el método centerAndZoom. Los parámetros son un GPoint (que generamos a continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar, de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado.
Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta información debemos suministrarla nosotros, y para ello lo más adecuado es usar alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa obtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios de geocoding disponibles de forma gratuita en la red que no exigen buscar el punto físico en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar búsquedas a partir del nombre de la ubicación que buscamos.
| Nota: El artículo continua en Desarrollar con Google Maps II. Pero atención, que estos ejemplos de Mapas de Google están explicados para el API 1 de Google Maps. Pero si queremos ver explicaciones actualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artículo: Mapas de Google API 2. |
Javier Chaure
Desarrollador freelance