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
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 677 views

 

Statistics

Views

Total Views
677
Views on SlideShare
677
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    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 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 Document Transcript

    • Cómo guardar las marcas de un mapa de Google en un archivo XML y acceder a eseXML para mostrar las marcas en el mapa.Por Miguel Angel AlvarezEn este artículo vamos a crear un archivo XML con los datos de diversas marcas quequeremos colocar en un mapa de Google. Desde Javascript accederemos al archivoXML, 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 interesanteguardarlas todas en un archivo para facilitar su almacenamiento y su procesamiento porel Javascript de Google Maps. Para ello, el XML es un formato excelente, ya que nosofrece un mecanismo sencillo y personalizable para definir las marcas y los datosasociados a ellas. Además, el API de Google Maps tiene varias clases para trabajar conXML, por lo que no tendremos que preocuparnos en las complejidades de procesar einterpretar el código XML donde hemos guardado las marcas.Esta implementación está basada en un tutorial bastante bueno, aunque en Inglés, sobreel 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 APIde Google Maps que estamos publicando en DesarrolloWeb.com. Así que nos podremoscentrar en la parte que se encarga de descargar y procesar el archivo XML con los datosde las marcas a colocar en el mapa.Archivo XML de las marcasLo primero que podemos ver es el archivo XML que hemos utilizado para definir losatributos 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 quemá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="Marcasituada sobre Barcelona. &lt;br&gt;Famosa en el mundo entero." /><marca lat="42.58544425738491" lng="-5.5755615234375" codigohtml="Esta marcaaparece 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á elmapa de google que lo lee.Lectura del archivo XML para procesar cada una delas marcas
    • Con diversas funciones del API de Google Maps, podemos procesar e interpretar elXML de una manera bastante sencilla.Primero tengo que hacer una llamada para descargar el archivo XML con los datos delas marcas://descargar el xml con las marcas y procesar su contenidoGDownloadUrl("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 adescargar se lo pasamos como primer parámetro y como segundo parámetro tenemosque especificar una función con el código que queremos ejecutar cuando se termine dedescargar el archivo. En esa función, a su vez, tenemos a nuestra disposición unparámetro que es el documento recién descargado. Todo lo que queramos hacer con elXML debe ser indicado forzosamente dentro de la función, porque está preparada paraejecutarse sólo cuando el XML ha sido recibido por completo.Ahora, con el documento, que sabemos es un XML, puedo utilizar el métodoGXml.parse() para analizarlo y devolver un objeto que contiene la estructura de nodosdel XML.var xmlDoc = GXml.parse(documento);A continuación, puedo extraer todas las etiquetas de las marcas con una llamada a unmé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 delas marcas. Luego podemos hacer un bucle para recorrer todas las marcas y colocarlasen 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 delos 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 valoresde latitud y longitud para crear puntos con el constructor de la clase GLatLng() debenser números en coma flotante, por eso es importante usar la función parseFloat(), paraconvertir cadenas en números con decimales.
    • La función crearMarca() será la encargada de generar la marca y mostrarla en el mapaque estamos construyendo. Como decía, ya habíamos aprendido a crear marcasanteriormente, 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 enel mapa.Código completo de crear marcas en mapas de Googledesde archivos XMLPodemos 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 sucontenido. 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=loadAhora quizás queramos ver el ejemplo construido en una página aparte.Algunas consideraciones sobre el XMLEn este ejercicio tener cuidado al generar el XML, ya que su interpretación puede darproblemas 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&amp;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"></iframe><br /><small><ahref="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&amp;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>