Mostrar marcas de Google Maps definidas en un archivo XML

  • Por
Cómo guardar las marcas de un mapa de Google en un archivo XML y acceder a ese XML para mostrar las marcas en el mapa.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

rafa

30/5/2009
Multiples marces
Antes de hacer una nueva marca hay alguna forma de comprobar si la marca ya existe?
como puedo implementar esto.
yo tengo un mapa en el que cargo muchas marcas pero algunas tienen las mismas coordenadas.
Mychas Gracias por la ayuda.

Carlos

29/7/2009
No me funciona el ejemplo en explorer
Que tal, está muy bien el ejemplo... pero a mi me da un problema, en firefox funciona perfecto pero en explorer no funciona, me dice que hay un error en javascript:

documentElement -- es nulo o no es un objeto

adrian

21/8/2009
mostrar tabs info windows desde xml
como se haria para mostrar pestañas de las ventanas de informacion de cada marca desde xml??
he encontrado este tutorial pero no funciona, me dice que javaScript no encuentra el archivo XML.
estoy desesperado.
Gracias

Robellado

03/2/2010
Claro y conciso
En cinco minutos he seguido he montado mis marcas desde un xml. Excelente artículo.

Sebastian

23/4/2010
Tutorial
Excelente tutorial, me sacaste las dudas que tenia respecto sobre como manipular los datos de un .xml para usarlos en mis mapas.

Gracias y saludos!!

manuel

19/7/2010
no me funciona en CHROME!!
Hola, primero muchas gracias por el manual. Esta muy bien para empezar a familiarizar con google maps.
Ahora el prblema:

GDownloadUrl("marcas_calles.xml", function(documento) {
//En esta función puedo examinar el XML y hacer cosas dependiendo su contenido.
var xmlDoc = GXml.parse(documento);
oficinas = xmlDoc.documentElement.getElementsByTagName("marca");
for (i = 0; i < oficinas.length; i++) {
var direccion = oficinas[i].getAttribute("DOMICI_OFI") + " , " + oficinas[i].getAttribute("NOM_LOCALIDAD") + " , " + oficinas[i].getAttribute("COD_POSTAL") + " , Spain"; }
});

En IE y FIREFOX va muy bien y pinta los marker, pero en chrome no!! Y no se por que.
me da el siguiente error:
exception error: NETWORK_ERR: XMLHttpRequest Exception 101

Me podrias echar una mano? Muchas gracias.

iPwn3D_

24/3/2012
Subir xml
Amigo ya tengo el archivo XML listo .. pesa 100mb .. y qiero subirlo a google maps! .. existe alguna manera de hacerlo?

kkroto1983

28/10/2013
Ayuda
ME Funciona excelente, pero ahora como puedo filtrarlo mediante checkbox para poder visualizar ciertas marca.

Juan carlos

16/1/2014
Pregunta
Una pregunta disculpando la ignorancia , en donde debe ubicarse el archivo xml?
en caso lo kiera usar ? en caso de usarlos sobre un formulario de escritorio

Mr_Kamus

07/1/2015
Consulta
Hola esta super bueno el ejemplo, pero ando buscando para realizar lo mismo en xml que ya lo tenia hecho pero tambien me gustaria poder cargarle un imagen alguien sabe el tag que debo utilizar en el xml para que lo reconozca api de google maps.

Saludos.

Kamus

EAG

03/2/2016
NO ME FUNCIONA .
ABRO LA PAGINA Y NO ME PROYECTA NADA , ALGUIEN PODRA SUBIR EL CODIG COMPLETO , INCLUYENDO LA IMPORTACION DEL XML , GRACIAS!