> Manuales > Manual del API de Google Maps

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:

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

Manual