Antes de nada decir que soy principiante en el mundo de la programación, y mi intención es crear una serie de mapas con cada una de las rutas de senderismo de una comarca.
Intento partir del script del ejemplo de la página: "http://econym.org.uk/gmap/markermanager.htm" llamado "Using GMarkerManager to manage large numbers of markers". Pero, después de darle muchas vueltas e intentar que me funcione, me he dado cuenta que si simplifico el número de marcas al mínimo para poderlas detectar bien en el mapa, el resultado es que algunos iconos no aparecen o se superponen.
En el ejemplo original hay 1.576 marcas en 4 colores diferentes. Si simplifico el archivo XML a 4 marcas, sólo aparecen iconos de 2 colores.
¿Será que estoy haciendo algo mal?
¿O es que el script original tiene algún fallo?
Por más que lo examino no logro encontrar el fallo.
¿Como podría solucionar este problema?
Estas marcas corresponderían a cada uno de los puntos de interés de la ruta de senderismo: Capillas, vistas panorámicas, albergues... con sus ventanas flotantes de información y un vínculos a alguna fotografía.
El código al que he llegado es el siguiente:
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQ IAAAAkZ9_dElsDjI0EPKKbuxI2RRBrpzr6kSyY8xLD1qEfrYtR 7HZehTiGEFOefs1CMp5_EZq49VA1dIzhQ" type="text/javascript"></script>
<script src="http://www.acme.com/javascript/OverlayMessage.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 6000px; height: 550px"></div>
<noscript><b>JavaScript debe estar activado para visualizar Google Maps.</b>
Para ver Google Maps, active JavaScript en las preferencias de su navegador.
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var n=0;
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
iconblue = new GIcon(icon,"http://labs.google.com/ridefinder/images/mm_20_blue.png");
icongreen = new GIcon(icon,"http://labs.google.com/ridefinder/images/mm_20_green.png");
iconyellow = new GIcon(icon,"http://labs.google.com/ridefinder/images/mm_20_yellow.png");
function createMarker(point,name,html,icon) {
var marker = new GMarker(point, {icon:icon});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// new strategy - read the XML first, THEN create the map
// read the markers from the XML
GDownloadUrl("archivo.xml", function (doc) {
var gmarkersA = [];
var gmarkersB = [];
var gmarkersC = [];
var gmarkersD = [];
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marke r");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var town = markers[i].getAttribute("town");
var pop = markers[i].getAttribute("pop");
// split the markers into four arrays, with different GIcons
if (parseInt(pop) > 70000) {
var marker = createMarker(point,town,town+"<br>Population: "+pop,icon);
gmarkersA.push(marker);
}
else if (parseInt(pop) > 50000) {
var marker = createMarker(point,town,town+"<br>Population: "+pop,iconyellow);
gmarkersB.push(marker);
}
else if (parseInt(pop) > 40000) {
var marker = createMarker(point,town,town+"<br>Population: "+pop,icongreen);
gmarkersC.push(marker);
}
else {
var marker = createMarker(point,town,town+"<br>Population: "+pop,iconblue);
gmarkersD.push(marker);
}
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.33316939281732, -7.0662689208984375), 14, G_SATELLITE_MAP);
var mm = new GMarkerManager(map, {borderPadding:1});
mm.addMarkers(gmarkersA,0,17);
mm.addMarkers(gmarkersB,0,17);
mm.addMarkers(gmarkersC,0,17);
mm.addMarkers(gmarkersD,0,17);
mm.refresh();
});
}
// display a warning if the browser was not compatible
else {
alert("Lo sentimos, Google Maps API no es compatible con tu navegador");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
</body>
</html>
--------------------------------------------------------
El archivo XML es este (simplificado):
---------------------------------------
<markers>
<!-- Dont use copy and paste on this XML file, use "View Source" or "Save As"
What the browser displays is *interpreted* XML, not XML source. -->
<marker town="Teixo" lat="43.343247025073474" lng="-7.062020301818848" categ="70001"/>
<marker town="Albergue" lat="43.32270919368713" lng="-7.068157196044922" pop="50001"/>
<marker town="Capilla de Santa Marina" lat="43.329124760238415" lng="-7.070882320404053" categ="40001"/>
<marker town="Cortín (734.72 metros)" lat="43.327329718646254" lng="-7.07944393157959" categ="10001"/>
</markers>
-------------------------------------------------
¿Como podria añadir al mapa una polyline de multiples puntos para representar el recorrido del sendero?
Estos puntos serían diferentes a los anteriores, ya que las marcas no coinciden exáctamente con el recorrido. Por ejemplo, una hermita está separada unos metros de distancia del sendero.
Agradecería me echarais una mano
Saludos