Una de las cosas que «está pegando fuerte» con la llamada Web 2.0 son los mashup. El mashup consiste en mezclar fuentes de información, utilizando diferentes tecnologías (RSS, ATOM, JavaScript,…), para ofrecer un resultado conjunto.
Una de las fuentes de datos que más ha pegado con los mashup ha sido Google Maps. Google Maps es la herramienta de Google que te permite localizar cualquier lugar del mundo, permitiéndote ver el mapa de la zona, la vista de satélite de dicha zona o ambos.
Los mashup que han salido han sido muchos. Por ejemplo localizaciones para la venta de pisos, situación de restaurantes, fuentes de tráfico,…
Lo primero que tendremos que hacer para poder utilizar Google Maps en nuestras páginas será hacernos con una clave de utilización. Esta clave nos la proporciona Google de forma gratuita (solo se necesita una cuenta en Google). Para ello tendremos que ir a http://www.google.com/apis/maps/signup.html. Una vez rellenados los datos tendremos una clave, la cual necesitaremos cuando codifiquemos.
Para cargar Google Maps en nuestra página deberemos de incluir el siguiente script.
Donde «miclave» es la clave que os ha proporcionado Google Maps. A partir de este momento ya tenemos acceso vía JavaScript al API de Google Maps.
El código para cargar el mapa es sencillo. Lo primero que deberemos hacer es crear una capa en la página, donde vayamos a posicionar el mapa. A esta capa la tendremos que dar un id.
En nuestro caso el id es «mapa». Este id nos servirá para hacer referencia desde el código JavaScript. Para crear el mapa utilizamos la función GMap2. La cual espera el elemento de la página sobre el que se cargará el mapa.
var map = new GMap2(document.getElementById("mapa"));
Una vez hemos cargado el mapa habrá que darle una ubicación. Las ubicaciones se manejan mediante la clase GLatLng. La cual recibe como parámetros la longitud y la latitud del punto geográfico a buscar.
La clase GLatLng será utilizada por el método setCenter de la clase GMap2 para ubicar la imagen del mapa. La línea de código será la siguiente:
map.setCenter(new GLatLng(40.674389,-4.700432), 12);
Puede ser que el API de Google Maps no funcione en ciertos navegadores. Es por ello que tenemos la función GBrowserIsCompatible() la cual nos indica si el navegador sobre el que se ejecuta es compatible.
Juntando todo nuestro código podemos componer la siguiente función:
function load(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("mapa"));
map.setCenter(new GLatLng(40.674389,-4.700432), 12);
}
}
Para finalizar es bueno saber que si lanzamos la función GUnload liberaremos las estructuras utilizadas en memoria. Es por ello que es recomendable hacerlo al salir de la página. Es decir, en el método onunload.
<body onload="load();" onunload="GUnload();">
Se puede encontrar más documentación sobre Google Maps en https://developers.google.com/maps/documentation/javascript/overview
