Este post está obsoleto, corresponde a la v2.x del API que Google decidió cerrar. Actualmente (10-feb-2014) se utiliza otro código compatible con la v3.x de API.
El mapa de rutas de BikerTB está construido con el API de Google Maps controlado con JavaScript. Google lo permite utilizar gratuitamente bajo determinadas condiciones de licencia que puedes leer al solicitar la API Key, siendo imprescindible para hacerlo funcionar en tu página. Para solicitar la API Key necesitas tener cuenta en Google.
Los tracks estan definidos en ficheros KML que deberemos alojar en algún servidor, por ejemplo en Google Sites. Y se cargan mediante formularios HTML.
Código necesario en la plantilla del blog:
<script type="text/javascript" src="http://www.google.com/jsapi?key=PON_TU_GOOGLE_MAPS_API_KEY_AQUI"></script>
<script type="text/javascript">
google.load('maps', '2.160');
var map;
var geoXml;
function initialize() {
map = new GMap2(document.getElementById("map"));
// Define la Latitud, Longitud para el centro de tu mapa y el nivel de zoom en la siguiente línea:
map.setCenter(new GLatLng(45.512654,-4.490452), 5);
// La siguiente línea opcional activa el plugin Earth:
map.addMapType(G_SATELLITE_3D_MAP);
map.addMapType(G_PHYSICAL_MAP);
var mapui = map.getDefaultUI();
map.setUI(mapui);
map.setMapType(G_PHYSICAL_MAP);
}
function loadKml(url) {
map.clearOverlays();
geoXml = new GGeoXml(url);
map.addOverlay(geoXml);
geoXml.gotoDefaultViewport(map);
}
</script></head>
<body onload="initialize()" onunload="GUnload">Crea tus ficheros KML con cada una de tus rutas o grupo de ellas y enlázalas en un post o mejor en una página estática.
Este es el código necesario con los enlaces apuntando a ficheros KML donde estarán descritas las rutas a representar:
Este es el código necesario con los enlaces apuntando a ficheros KML donde estarán descritas las rutas a representar:
<!-- Botones para los mapas de grupo -->
<div style="float:left;"><form id="kmlurl-group" ACTION="#" NAME=EnGrupo>
<input type="button" onclick="document.SoloUna.reset();
loadKml('http://ENLACE_A_TU_SITE/Todos-Centro.kmz'); return false;" value="Zona Madrid" />
<input type="button" onclick="document.SoloUna.reset();
loadKml('http://ENLACE_A_TU_SITE/Todos-Alicante.kmz'); return false;" value="Zona Alicante" />
<input type="button" onclick="document.SoloUna.reset();
loadKml('http://ENLACE_A_TU_SITE/Todos-Essex.kmz'); return false;" value="Zona Essex" /></form></div><!-- Lista desplegable para los tracks individuales -->
<div><form id="kmlurl" ACTION="#" NAME=SoloUna><SELECT style="margin: 2px 0 0 15px;" NAME="ruta" ONCHANGE="loadKml(document.SoloUna.ruta.value); return false;">
<OPTION VALUE="">Rutas individuales:</OPTION>
<OPTION VALUE="http://ENLACE_A_TU_SITE/ADF-Marmota-Batan.kmz">IBP 94BC: ADF - Puentes Batán y Marmota</OPTION>
<OPTION VALUE="http://ENLACE_A_TU_SITE/mutxavista-maigmo.kmz">IBP 91BC: Mutxavista - Balcó d'Alacant</OPTION>
<OPTION VALUE="http://ENLACE_A_TU_SITE/DehesaMoncalvillo.kmz">IBP 77AA: La Dehesa de Moncalvillo</OPTION>
<OPTION VALUE="http://ENLACE_A_TU_SITE/sifones-jarama.kmz">IBP 74AA: Por el CYII: Los sifones del Jarama</OPTION>
</SELECT></form></div>
<div id="map" class="map" style="height:800px"></div>
