En este artículo vamos a crear un archivo XML con los datos de diversas marcas que queremos colocar en un mapa de Google. Desde Javascript accederemos al archivo XML, leeremos sus contenidos y colocaremos las marcas definidas en el mapa.

Si queremos tener varias marcas a la vista en un mapa de Google puede ser interesante guardarlas todas en un archivo para facilitar su almacenamiento y su procesamiento por el Javascript de Google Maps. Para ello, el XML es un formato excelente, ya que nos ofrece un mecanismo sencillo y personalizable para definir las marcas y los datos asociados a ellas. Además, el API de Google Maps tiene varias clases para trabajar con XML, por lo que no tendremos que preocuparnos en las complejidades de procesar e interpretar el código XML donde hemos guardado las marcas.

Esta implementación está basada en un tutorial bastante bueno, aunque en Inglés, sobre el API de Google Maps, en concreto el artículo Loading the data from an XML file.

Para crear las marcas utilizamos código que ya hemos comentado en el Manual del API de Google Maps que estamos publicando en DesarrolloWeb.com. Así que nos podremos centrar en la parte que se encarga de descargar y procesar el archivo XML con los datos de las marcas a colocar en el mapa.

Archivo XML de las marcas

Lo primero que podemos ver es el archivo XML que hemos utilizado para definir los atributos de las marcas.

Es un archivo que contiene código XML, donde las etiquetas que definen las marcas, así como los atributos de éstas, tienen nombres que cada uno puede elegir de la manera que más le convenga, así como añadir más o menos informaciones o datos para cada marca.

Podemos ver el resumen del código del archivo XML aquí:

<marcas>
<marca lat="41.38196080315538" lng="2.176666259765625" codigohtml="Marca situada sobre Barcelona. &lt;br&gt;Famosa en el mundo entero." />
<marca lat="42.58544425738491" lng="-5.5755615234375" codigohtml="Esta marca aparece sobre la ciudad de Leon" />
</marcas>

El nombre del archivo también es indiferente. En mi caso lo he nombrado como marcas-xml.xml y para realizar este ejemplo lo he colocado en el mismo directorio donde está el mapa de google que lo lee.

Lectura del archivo XML para procesar cada una de las marcas

Con diversas funciones del API de Google Maps, podemos procesar e interpretar el XML de una manera bastante sencilla.

Primero tengo que hacer una llamada para descargar el archivo XML con los datos de las marcas:

//descargar el xml con las marcas y procesar su contenido
GDownloadUrl("marcas-xml.xml", function(documento) {
   //En esta función puedo examinar el XML y hacer cosas dependiendo su contenido.
});

Con GdownloadUrl traigo el contenido de un archivo. El nombre del archivo a descargar se lo pasamos como primer parámetro y como segundo parámetro tenemos que especificar una función con el código que queremos ejecutar cuando se termine de descargar el archivo. En esa función, a su vez, tenemos a nuestra disposición un parámetro que es el documento recién descargado. Todo lo que queramos hacer con el XML debe ser indicado forzosamente dentro de la función, porque está preparada para ejecutarse sólo cuando el XML ha sido recibido por completo.

Ahora, con el documento, que sabemos es un XML, puedo utilizar el método GXml.parse() para analizarlo y devolver un objeto que contiene la estructura de nodos del XML.

var xmlDoc = GXml.parse(documento);

A continuación, puedo extraer todas las etiquetas de las marcas con una llamada a un método del objeto xmlDoc.

var marcas = xmlDoc.documentElement.getElementsByTagName("marca");

Después de ese paso, la variable marcas contendrá un array con todas las etiquetas de las marcas. Luego podemos hacer un bucle para recorrer todas las marcas y colocarlas en el mapa.

for (var i = 0; i < marcas.length; i++) {
   var lat = parseFloat(marcas[i].getAttribute("lat"));
   var lng = parseFloat(marcas[i].getAttribute("lng"));
   var punto = new GLatLng(lat,lng);
   var html = marcas[i].getAttribute("codigohtml");

   crearMarca(punto, html);
}

Dentro del bucle podemos acceder a marcas[i].getAttribute() para extraer los valores de los atributos de las marcas definidos en el código XML.

Un detalle es que en archivo XML todos los datos son tratados como String. Los valores de latitud y longitud para crear puntos con el constructor de la clase GLatLng() deben ser números en coma flotante, por eso es importante usar la función parseFloat(), para convertir cadenas en números con decimales.

La función crearMarca() será la encargada de generar la marca y mostrarla en el mapa que estamos construyendo. Como decía, ya habíamos aprendido a crear marcas anteriormente, pero dejo aquí el código.

function crearMarca(punto, html){
   var miMarca = new GMarker(punto);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   map.addOverlay(miMarca);
}

Con lo que hemos visto hasta ahora ya ser ha podido procesar las marcas y colocarlas en el mapa.

Código completo de crear marcas en mapas de Google desde archivos XML

Podemos ver el código completo de este ejemplo a continuación:

function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 5);    
      
      function crearMarca(punto, html){
         var miMarca = new GMarker(punto);
         GEvent.addListener(miMarca, "click", function (){
            miMarca.openInfoWindowHtml(html);
         });
         map.addOverlay(miMarca);
      }
      
      //descargar el xml con las marcas y procesar su contenido
      GDownloadUrl("marcas-xml.xml", function(documento) {
         //En esta función puedo examinar el XML y hacer cosas dependiendo su contenido.
         var xmlDoc = GXml.parse(documento);
         //extraigo todas las marcas del XML. Obtengo un array
         var marcas = xmlDoc.documentElement.getElementsByTagName("marca");
         for (var i = 0; i < marcas.length; i++) {
            var lat = parseFloat(marcas[i].getAttribute("lat"));
            var lng = parseFloat(marcas[i].getAttribute("lng"));
            var punto = new GLatLng(lat,lng);
            var html = marcas[i].getAttribute("codigohtml");
            
            crearMarca(punto, html);
         }
      });
      
   }
}
window.onload=load

Ahora quizás queramos ver el ejemplo construido en una página aparte.

Algunas consideraciones sobre el XML

En este ejercicio tener cuidado al generar el XML, ya que su interpretación puede dar problemas en distintos navegadores si no se escribe el código correctamente.

• Caracteres < y >: en el XML no podemos incluir en los valores de los atributos de las etiquetas los caracteres de cierre y apertura de etiquetas. Como hay un campo donde se guarda un código HTML a mostrar cuando se hace clic en la marca, los caracteres < y > los tenemos que poner con sus correspondencias &lt y &gt;.
• Acentos: Los acentos y otros caracteres como la ñ, dan problemas en a la hora de interpretar el código XML por Internet Explorer. Por su parte, Firefox los codifica y muestra incorrectamente, aunque al menos no lanza errores Javascript. Convertirlos a los caracteres especiales del HTML no soluciona el problema. De momento yo los he quitado para hacer las pruebas y más adelante veremos cómo lidiar con juegos de caracteres.
• Caché del XML: A veces puede que actualices el XML y no se actualicen los datos de las etiquetas. Esto es porque el contenido del XML se cachea y puede ocurrir que aunque lo hayas cambiado se siga mostrando el contenido antiguo del archivo. Una solución en Internet Explorer es cerrar el navegador y volver a abrir.