1. 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.
Por Miguel Angel Alvarez
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

2. 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.

3. 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);

4. }
});
}
}
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.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com.br/maps?f=q&amp;source=s_q&amp;hl=pt-
BR&amp;geocode=&amp;q=%C3%81guas+Belas+-
+Pernambuco&amp;aq=0&amp;oq=aguas+belas&amp;sll=39.449421,-
89.915965&amp;sspn=0.010538,0.022724&amp;g=37+12000,+Modesto,+IL,+United+States&a
mp;ie=UTF8&amp;hq=&amp;hnear=%C3%81guas+Belas+-+Pernambuco&amp;ll=-9.110198,-
37.124768&amp;spn=6.895054,11.634521&amp;t=m&amp;z=7&amp;output=embed"></ifra
me><br /><small><a
href="http://maps.google.com.br/maps?f=q&amp;source=embed&amp;hl=pt-
BR&amp;geocode=&amp;q=%C3%81guas+Belas+-
+Pernambuco&amp;aq=0&amp;oq=aguas+belas&amp;sll=39.449421,-
89.915965&amp;sspn=0.010538,0.022724&amp;g=37+12000,+Modesto,+IL,+United+States&a
mp;ie=UTF8&amp;hq=&amp;hnear=%C3%81guas+Belas+-+Pernambuco&amp;ll=-9.110198,-
37.124768&amp;spn=6.895054,11.634521&amp;t=m&amp;z=7" style="color:#0000FF;text-
align:left">Exibir mapa ampliado</a></small>