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;">