Introducción a Google Maps API
Alfonso Egio
Mucho se ha dicho ya acerca de la Web 2.0 y de las
posibilidades y nuevos servicios que ofrece como filosofía de
diseño de portales, sistemas de gestión de contenidos,
bookmarking social y etc ...
Pese a todo y cómo suele pasar en un gran
número de casos dentro de lo que son las tendencias tecnológicas
actuales, existen aun muchas iniciativas que podriamos calificar de
fenomenología burbujil ... es decir, no ofrecen ningún tipo
servicio valorable en si mismo aparte de una ingente exhibición tecnológica que
descuida los intereses de los usuarios o visitantes.
No obstante, de entre todo el conjunto de aventuras
desarrolladas en el marco de lo que hoy se conoce como la nueva Web, uno
de los primeros gigantes de internet ofrece un servicio claramente diferenciado
con grandes posibilidades y al alcance de cualquiera.
Nos referimos a Google
con su brillante aplicación Google Maps.
Lo cierto es que desde Junio de 2005, además de poder
disfrutar de la aplicación alojada en Google, disponemos del servicio
Google Maps Api que nos permite
empotrar toda la funcionalidad de dicha aplicación en nuestra propia
Web. En las lineas que siguen vamos a proporcionar un primer ejemplo
básico de uso de dicha interfase sobre Javascript para poder incluir un
mapa como el que sigue en nuestra página:
Mapa interactivo de La Puebla de Castro basado Google Maps API. Puedes
utilizar los controles de Zoom y desplazamiento además de admirar la
vista por satélite
Código javascript
En primer lugar y dado que Google Maps, es la
aplicación AJAX por excelencia, (debemos tener en cuenta que la J va
por Javascript),
el API que nos ofrecen desde Google está en Javascript. A
continuación
se comenta el código que debemos incluir entre <head> y
</head>
de nuestra página HTML:
<script src="http://maps.google.com/maps?file=api&v=2&key=..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var infoTabs = [
new GInfoWindowTab("Tab #1", 'La Puebla de Castro')
];
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(42.1455, 0.2874), 14);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker,
"click",
function()
{ marker.openInfoWindowTabsHtml(infoTabs); });
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
//]]>
</script>
Tal como se puede apreciar, se invoca a un script
con URL:
http://maps.google.com/maps?file=api&v=2&key=...........
Donde detrás de key hemos de
emplazar nuestra clave de Google Maps que podemos conseguir en
Google Maps Signup
con tan solo
indicar la URL de nuestra página y aceptar los términos del servicio.
A partir de aquí, se pasa nuestra parte del
código dentro de la cápsula CDATA para personalizar nuestro
mapa. En primer lugar se instancia un GInfoWindowTab en el que podemos extender
el HTML deseado (incluso mostrar imágenes e hipervínculos como
en ésta misma página). A continuación, instanciamos el
mapa como un objeto GMap2, le añadimos los controles de
zoom y desplazamiento además de los de vista satélite,
híbrida y etc ... (GSmallMapControl y
GMapTypeControl), situamos el centro del mapa y zoom
(14) mediante la instrucción:
map.setCenter(new GLatLng(42.1455, 0.2874), 14);
Haciendo alusión directa a la latitud y longitud
geográfica de nuestro querido municipio, integramos la ventana de
información de infoTabs y finalmente la mostramos
por defecto asociada al marker (color naranja) del centro del mapa.
Por último no olvidemos incluir sobre el tag
body de
nuestro código HTML los siguientes atributos de evento:
<body onload="load()" onunload="GUnload()">
Para a continuación situar el mapa donde nos plazca
mediante un tag de tipo div formateado al gusto:
<div id="map" style="width: 500px; height: 500px"></div>
De modo que ya podemos disfrutar de nuestros propios y
personalizados mapas interactivos ... suerte y a por ellos !
Ejemplos de uso:
