En este primer artículo, veremos con detalle como crear el mapa más simple posible, el hola, mundo de los Google Maps.
Las claves de uso del API
Lo primero que necesitamos para poder integrar los mapas de Google en nuestra página es obtener una clave o licencia que nos permita usar el API. Esta clave es gratuita, y se pueden obtener en cualquier momento en la siguiente dirección:http://www.google.com/apis/maps/signup.html
La clave de la API tiene una particularidad, y es que está asociada con el dominio que estemos usando para publicar los mapas. En condiciones normales, esto no representa mayor problema, ya que sólo tenemos un dominio asociado. Por ejemplo, la licencia para el dominio:
http://elornitorrincoenmascarado.blogspot.com/
es la siguiente:
ABQIAAAA6iRlsRnv2BbTB6hZIJNmkhRIWXn6NroHJguNwf4qG0a27a_JwhRVogFOBOe_F9rEK2LUz23nNl-ciw
Y sirve para cualquier página servida desde este dominio.
Las licencias no presentan mayor problema, se trata de pedirlas y descargarlas automáticamente desde la página web que comenté al principio, y se puede generar las veces que haga falta.
Una vez obtenida la licencia, podemos usar las librerías Javascript que nos dan acceso a la API de GoogleMaps. Estas librerías se descargan directamente desde Google, y la url que se utiliza para ello incluye el valor de la clave. La librería se referencia usando el tag html <script>.
Ejemplo de mapa
Este sería un ejemplo simple de uso de un 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6iRlsRnv2BbTB6hZIJNmkhSceXCEEWbZ4MRkRENnYTtt95PkaRT6Cnk1s5EKLx0f4e0rlu7mf4GpAQ"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(28.487194,-16.314558), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Para simplificar el desarrollo, Google permite que se descargue y se utiliza la librería usando cualquier licencia, pero solo para páginas cargadas de forma local, es decir, leídas directamente desde el disco duro.
Sobre la creación del mapa
Examinemos el código anterior con más detalle. En primer lugar, nos fijaremos en que al final de la página hay un elemento div, identificado como map (Se puede usar el identificador que queramos, pero debemos usar ese mismo valor cuando hagamos referencia más adelante a este elemento en el código javascript). Ese elemento es el que se usará para incluir el mapa. Se pueden ajustar propiedades como el ancho, alto y la posición usando estilos CSS.
Vemos también que al inicio de la página hemos cargado la API de Google Maps, y si nos fijamos bien, veremos que el enlace que hemos usado para descargarla incluye la licencia de nuestro sitio web. Tambien hay una indicación de la versión de la API que debemos descargar. La más actual en el momento de escribir esto en la 2.
Nuestro código hace un uso muy simple de la API. En primer lugar, comprueba que el navegador soporta las características necesarias para la presentación de los mapas (Cualquier navegador más o menos moderno, incluso esa cosa llamada MS Explorer, lo soporta, pero es conveniente incluir esta comprobación por si acaso el usuario ha desactivado el javascript). Esta comprobación se realiza llamando a la función GBrowserIsCompatible.
Una vez que hemos garantizado que el navegador es apto, lo primero que hacemos es instanciar el mapa. Para ello se crea un objeto GMap2, que necesita como parámetro el identificador del div que contendrá el mapa. En nuestro caso, hemos optado por usar como identificador "map" (No somos demasiado originales). Esta llamada devuelve un manejador o handler del mapa, que es una variable que usaremos siempre que queramos interactuar con el mapa a nivel de programación.
Una vez tenemos el mapa creado, debemos indicar su estado inicial, eso es, las coordenadas del punto sobre el que se centrará el mapa, y el nivel de zoom inicial a utilizar. Esto se hace llamando al método setCenter del objeto de la clase GMap2. Las coordenadas son, evidentemente, una pareja de latitud y longitud, y se pasan en forma de objeto de la clase GLatLng. Los niveles de zoom en la versión actual de la API van desde 0 (El nivel más externo, donde vemos el mapa de la Tierra al completo) hasta el 17 (El más cercano a la Tierra que se puede obtener actualmente, aunque algunas zonas experimentales permiten acercarse hasta el nivel 19).
Hemos agrupado todo este código dentro de una función llamada load() (De nuevo un nombre poco imaginativa). Debemos asegurarnos ahora de que esta función sea llamada, y además, que sea llamada cuando la carga de la página esté terminada. ¿Por qué esta distinción? porque vamos a acceder a un elemento de la página (el div identificado como map), que debe de estar creado cuando llamemos a la función. La forma más sencilla de conseguir esto -aunque no necesariamente la mejor- es realizar esta llamada usando el atributo onload de la etiqueta body.
Resumen y conclusiones
Este sería la forma más fácil de incluir un mapa de Google en nuestra páginas. Hemos visto que hace falta obtener una licencia de uso, y que la licencia está vinculada con la dirección en la que vamos a poner nuestro mapa. Debemos descargar la API desde el propio servidor de Google, y la usamos para comprobar la disponibilidad del navegador, crear el mapa y posicionarlo en un punto de nuestro interés.
En una próxima entrada veremos como crear uno o varios marcadores sencillos, y como incluir controles de zoom, movimiento y capas adicionales a nuestro mapa.
El mapa que describimos arriba se vería así:
Algunos enlaces interesantes
- Google Maps API
- Google Lat Long Blog - News and Notes by the Google Earth and Maps Team
- Google Maps Mania - An unofficial Google Maps blog tracking the websites, mashups and tools being influenced by Google Maps.
2 comentarios:
Publicar un comentario en la entrada