Utilización de GeoXML3

GeoXML3 nos permite procesar desde el navegador web con javascript un fichero XML que en nuestro caso será un KML y así adaptar su contenido a nuestras necesidades.

Entre las posibilidades que tenemos al cargar desde javascript el contenido de un archivo KML están:

1. Utilización selectiva del contenido del KML.
2. Implementación de filtros de visualización.
3. Modificación de contenido.

Para trabajar con estas librerías se deben incluir en nuestro sitio las siguientes librerías javascript.

jquery-1.9.1.js  Descargar

geoxml3.js   Descargar  

La librería geoxml3 que yo les dejo para la descarga esta modificada para utilizar jQuery para realizar ajax, es por esto que indico que deben estar ambas librerías incluidas. Si optas por utilizar la librería geoxml3 de la pagina del proyecto o autor no es requerimiento incluir jQuery a tu proyecto, aunque a mi al hacer esto me arrojaba errores y es por ello opte por modificar los ajax para que utilice jQuery.

Código de inclusión

<script type="text/javascript" src="jquery-1.9.1.js" charset="utf-8">

<script type="text/javascript" src="geoxml3.js" charset="utf-8">

<script type="text/javascript" charset="utf-8">
    jQuery(function(){

    //Objeto con la configuración inicial del mapa

    var mapOptions = {

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    //Se crea el mapa donde se insertaran los 
    //elementos del archivo KML

    var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


    //Se crea el parser para el archivo KML
    var myParser = new geoXML3.parser({
        //Se indica el mapa donde se insertaran los 
        //elementos del KML
        map: myMap,

       processStyles: true,
       //Función donde puedes tomar los marcadores y visualizarlos 
       //en el mapa, o almacenarlos para así   luego filtrar, etc
       createMarker: function(placemark){
                    //Como ejemplo sólo estamos mostrando todos
                    //los marcadores tal cual están en el KML
                    myParser.createMarker(placemark);
        },
       //Función que se ejecuta después de que fue 
        //completamente analizado el KML
       afterParse:function(document){
               alert("EL ARCHIVO KML YA FUE PROCESADO");
        }

});
//Ahora le indicamos a nuestro parser la url de nuestro KML.
myParser.parse('url_de_nuestro_kml');
/*
Si el KML está alojado en un servidor externo debemos utilizar un proxy php que se encarge de descargar nuestro archivo.
Si este es el caso MIREN LA SIGUIENTE ENTRADA donde hay un ejemplo para la descarga de KML's desde google maps.  ENLACE
*/
});
</script>

Y en el body tiene que ir un DIV como el siguiente, no olvidar que las dimensiones y la posición son sólo de ejemplo:

<div style="width:400px;height:600px;">

Descargar KML con CURL en PHP

Me tope con la necesidad de obtener el archivo KML que define un mapa google maps para ser procesado por el navegador web desde javascript y me tope con la imposibilidad de hacer un Coss Domain con ajax para este propósito  por lo cual tuve que crear un archivo php que hiciese de proxy con google maps y se encargara de su descarga.

El archivo PHP que hace de proxy se llamo proxy.php y recive como parametro por GET la url del KML en google maps.

Con lo cual su la nueva url que utilizaremos en un ajax desde javascript quedaría así:

var URL_KML = "proxy.php?mapa=" + escape("url_del_mapa_en_googlemaps");


jQuery.ajax({
    type: "GET",
    url: URL_KML,
    success: function(kml) {
           //Tu código para procesar el KML es aquí
    }
  });


El archivo proxy.php lo pueden descargar desde: proxy.php