Google maps en la web del centro
Google maps es un servicio web que permite acceder a información cartográfica sobre todo el mundo, pueden verse los mapas lógicos o fotografías satélite de prácticamente todo el planeta, incluso de la Luna.
Google Maps API
Es posible utilizar Google Maps API para construir aplicaciones no comerciales, por ejemplo es posible representar los diferentes centros que participan en la XEiLL. El proceso esquemático para construir una nueva aplicación consiste en:
- Registrarse y obtener una clave para Google Maps API. La clave está asociada con una URL, de manera que sólo se podrá utilizar en páginas que se encuentren por debajo de dicha URL. Por ejemplo: http://iespuigcastellar.xeill.net/googlemaps
- Escribir una página web que contenga:
- Una referencia al Javascript de Google:
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script> - Código Javascript que implementa la aplicación pintando encima del mapa
- Un elemento <div> que ubica el mapa en la página
<div id="map" style="width: 600px; height: 600px;" ></div>
Google Maps API en Plone
Es posible incrustar objetos Google Maps en páginas de Plone. De hecho, en nuestro CMS ya se han modificado los patrones de Plone para que esto sea posible.
La modificación ha consistido en realizar una versión propia del patrón header, para que si es el caso se incluyan los archivos Javascripts necesarios.
El patrón portal_skins/custom/header incluye:
<!-- Si existe un script local googlemaps.js lo incluimos -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPFe1Djzez9uoICeuvUk80RQt_eJt5zi1jNjxRDGPLuWSCPlU_BSUXOtWsIb3wxLEiuj1tdZOI5w1hQ"
tal:condition="exists: context/googlemaps.js" type="text/javascript">
</script>
<script src="googlemaps.js" type="text/javascript" tal:condition="exists: context/googlemaps.js"></script>
De manera que en cualquier carpeta en la que exista el fichero googlemaps.js se incluirá el código necesario para poder incrustar un mapa.
Fichero googlemaps.js
Con cualquier editor de textos se puede escribir el fichero googlemaps.js con las instrucciones necesarias para representar la aplicación sobre el mapa. Después basta con subirlo a una carpeta del gestor de contenidos como si fuese un fichero. En esa misma carpeta, se podrán preparar páginas que contengan mapas de Google.
Como muestra, el fichero googlemaps.js necesario para representar los nodos de la XEiLL y sus enlaces es:
//<![CDATA[
window.onload = function create_gmap() {
if (GBrowserIsCompatible()) {
// Creamos el objeto map y inicializamos la posición y zoom
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(41.455469, 2.201573), 14);
// Añadimos controles al mapa
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Añadimos marcadores
var nodo = new Array(); var info = new Array();
nodo[0]=new GLatLng(41.455469,2.201573); info[0]='IES Puig Castellar<br><a href="http://iespuigcastellar.xeill.net">iespuigcastellar.xeill.net</a>';
nodo[1]=new GLatLng(41.452923,2.202957); info[1]='CEIP Torre Balldovina<br><a href="http://ceip-balldovina.xeill.net">ceip-balldovina.xeill.net</a>';
nodo[2]=new GLatLng(41.436232,2.217007); info[2]='CEIP Rafael Casanova<br><a href="http://ceiprafaelcasanova.xeill.net">ceiprafaelcasanova.xeill.net</a>';
nodo[3]=new GLatLng(41.442903,2.215666); info[3]='IES Terra Roja<br><a href="http://iesterraroja.xeill.net">iesterraroja.xeill.net</a>';
nodo[4]=new GLatLng(41.458291,2.217329); info[4]='IES La Bastida<br><a href="http://ieslabastida.xeill.net">ieslabastida.xeill.net</a>';
nodo[5]=new GLatLng(41.459565,2.197169); info[5]='CEIP Lluis Millet<br><a href="http://ceiplluismillet.xeill.net">ceiplluismillet.xeill.net</a>';
nodo[6]=new GLatLng(41.444375,2.209282); info[6]='IES Can Peixauet<br><a href="http://iescanpeixauet.xeill.net">iescanpeixauet.xeill.net</a>';
nodo[7]=new GLatLng(41.460064,2.20204); info[7]='CRP Santa Coloma<br><a href="http://crpsantacoloma.xeill.net">crpsantacoloma.xeill.net</a>';
nodo[8]=new GLatLng(41.164069,0.7665); info[8]='ZER El Serraí (Bellmunt)<br>Acceso satélite. Resolver VPN.';
nodo[9]=new GLatLng(41.446225,2.214196); info[9]='CEIP Banús<br><a href="http://ceipbanus.xeill.net">ceipbanus.xeill.net</a>';
nodo[10]=new GLatLng(41.459589,2.218176); info[10]='IES Torrent de les Bruixes<br><a href="http://iestorrentdelesbruixes.xeill.net">iestorrentdelesbruixes.xeill.net</a>';
nodo[11]=new GLatLng(41.430058,2.217881); info[11]='CRP Sant Adrià<br><a href="http://crpsantadria.xeill.net">crpsantacoloma.xeill.net</a>';
function createMarker(point, info) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("Centre: <em>" + info + "</em>");});
return marker;
}
for (var i = 0; i < nodo.length; i++) {
map.addOverlay(createMarker(nodo[i], info[i]));
}
// Añadimos polylines para representar los enlaces
var vpn_src = []; var vpn_dst = [];
vpn_src[0]=nodo[0]; vpn_dst[0]=nodo[1];
vpn_src[1]=nodo[0]; vpn_dst[1]=nodo[2];
vpn_src[2]=nodo[0]; vpn_dst[2]=nodo[3];
vpn_src[3]=nodo[0]; vpn_dst[3]=nodo[4];
vpn_src[4]=nodo[0]; vpn_dst[4]=nodo[5];
vpn_src[5]=nodo[0]; vpn_dst[5]=nodo[6];
vpn_src[6]=nodo[0]; vpn_dst[6]=nodo[7];
vpn_src[7]=nodo[0]; vpn_dst[7]=nodo[8];
vpn_src[8]=nodo[0]; vpn_dst[8]=nodo[9];
vpn_src[9]=nodo[0]; vpn_dst[9]=nodo[10];
vpn_src[10]=nodo[0]; vpn_dst[10]=nodo[11];
for (var i = 0; i < vpn_src.length; i++) {
var puntos = []; puntos.push(vpn_src[i]); puntos.push(vpn_dst[i]);
map.addOverlay(new GPolyline(puntos));
}
}
}
//]]>
Incrustando un mapa en una página
El último paso consiste en generar una página web con un elemento <div> que represente al mapa.
Por ejemplo:
<div id="map" style="width: 500px; height: 300px;"></div>
Para poder incluir esta etiqueta en la página web, es necesario desactivar Kupu. Para ello hay que ir a preferencias -> preferencias personales y seleccionar como editor web el editor estandar, pues la configuración de Kupu no admite estas etiquetas.
Después, cuando ya se ha guardado la página se puede volver a activar Kupu.