Integrar API de Google Maps, archivos kml, kmz y otras fumarolas :D

Ya que andamos en eso de la posteada ahora les voy a dejar un pequeño manual sobre como integrar la API de maps (google) dentro de nuestro código, hay varia documentación en la página developers de google, pero realmente lo que uno busca cuando pone en google: "integrar api de maps" es ver un ejemplo claro y directo para que se pueda entender de mejor forma.

Así que pues ya comentada la información de arriba les paso a dejar un ejemplo.

Lo primero que tenemos que poner en nuestro código es la llamada a la API de maps:


<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&language=es">
</script>

En este caso la variable sensor está en false, esto nos indica que no hay un dispositivo gps que pueda tomar la ubicación (se pone generalmente en true cuando es para aplicación movil, llámese celular o tableta)

El lenguaje declaramos español, esto es para los menús que se van a mostrar en el mapa. 

Una vez que tenemos esto vamos a empezar con la declaración de nuestro código javascript para que se utilice en la API. 

El código va a ir comentado para que vayan viendo que hace cada linea. 




<script type="text/javascript">
    //Declaramos la variable G, esto para hacer llamadas rápidas dentro de la API, que generalmente se pone
    //algo como: google.maps.LatLng(xxxx,yyyy), con esto lo cambiamos por: G.LatLng
    //Declaramos nuestra variable kml y show que ocuparemos más abajo
    var G = google.maps; var kml = null; var show = false;
    //La variable azcapotzalco la declaramos como la posición inicial en el mapa, esto será parael boton de "reset" que pondremos
    var azcapotzalco = new google.maps.LatLng(19.490544, -99.190493);

    //Inicio función centrar
    //Esta función nos centra la vista del çódigo, viene más explicado en developers de maps
    function HomeControl(controlDiv, map) {

      // Set CSS styles for the DIV containing the control
      // Setting padding to 5 px will offset the control
      // from the edge of the map
      controlDiv.style.padding = '5px';

      // Set CSS for the control border
      var controlUI = document.createElement('DIV');
      controlUI.style.backgroundColor = 'white';
      controlUI.style.borderStyle = 'solid';
      controlUI.style.borderWidth = '2px';
      controlUI.style.cursor = 'pointer';
      controlUI.style.textAlign = 'center';
      controlUI.title = 'Click para colocar en la posición inicial';
      controlDiv.appendChild(controlUI);

      // Set CSS for the control interior
      var controlText = document.createElement('DIV');
      controlText.style.fontFamily = 'Arial,sans-serif';
      controlText.style.fontSize = '12px';
      controlText.style.paddingLeft = '4px';
      controlText.style.paddingRight = '4px';
      controlText.innerHTML = 'Centrar el Mapa';
      controlUI.appendChild(controlText);

      
      google.maps.event.addDomListener(controlUI, 'click', function() {
        //Aquí declaramos que al dar click en el boton se ejecute la acción de centrar con los parametros de 'azcapotzalco'
        map.setCenter(azcapotzalco)
        //Colocamos el zoom inicial del mapa
        map.setZoom(13);
      });
    }
    //Termina código para "resetear" mapa

    //Dentro de esta función vamos a mandar a llamar capas dinamicamente, en este caso son archivos kml los cuales 
    //se pueden generar con Google Earth
    function toggle() {
        if (!this.kmlLayer ) {
            this.kmlLayer = new G.KmlLayer(
                'http://kaguamedia.com/kml/' + this.id + '.kml', //ponemos la ruta de donde va a mandar a llamar los archivos.
                { preserveViewport:true } );
            this.displayIsOn = false;
        }

        //Declaramos que cuando esté desactivado el checkbox no nos muestre la capa
        if ( this.displayIsOn ) {
            this.kmlLayer.setMap( null );
            this.displayIsOn = false;
        }
        else {
            this.kmlLayer.setMap( map );
            this.displayIsOn = true;
            //Declaramos que cuando esté activado el checkbox nos muestre la capa
        };
    };

    
    //Con esta función inicializamos el mapa
    function initialize() {
        //Tomamos los valores del input que agregamos abajo para mostrar las capas
        var layers = document.getElementsByTagName('input');
        //Agregamos las opciones iniciales para la capa, la longitud inicial, el nivel de zoom, que tipo de mapa es 
        //(en este punto podemos declarar ROADMAP, SATELLITE, HYBRID, TERRAIN para diferentes vistas )
        //decimos que si queremos poder manejar el zoom, en overviewMapControl es para que se ponga la vista miniatura
        //dentro de mapTypeControlOptions podemos declarar la forma en la que se verá el menú, con formato vertical 
        //o en forma de "lista"
        var options = {
            center: new G.LatLng(19.490544, -99.190493),
            zoom: 13,
            mapTypeId: G.MapTypeId.ROADMAP,
            scaleControl: true,
            overviewMapControl: true,
            mapTypeControlOptions: {
                style:G.MapTypeControlStyle.DROPDOWN_MENU }
        };

        //Inicializamos el mapa con las opciones que declaramos arriba
        map = new G.Map(document.getElementById('map'), options);
        //En este caso vamos a declarar una capa inicial para nuestro mapa, es un archivo kmz y se cargará al inicializar el mapa
        var kmzLayer = new google.maps.KmlLayer('http://kaguamedia.com/kml/Azcapotzalco.kmz');
        kmzLayer.setMap(map);
        //En esta función vamos a declarar otra capa, en este caso un archivo kml para que de la misma forma se inice con el mapa
        var kmzLayer = new google.maps.KmlLayer('http://kaguamedia.com/kml/Colonias.kml');
        kmzLayer.setMap(map);
        //Agrego de los dos tipos de archivos para que vean que la forma de llamar un kmz y un kml es la misma.
        
        //Creamos el div para la función centrar arriba mostrada
        var homeControlDiv = document.createElement('DIV');
        var homeControl = new HomeControl(homeControlDiv, map);
        homeControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

        //En esta función vamos a tomar los valores de los checkbox que están declarados en el código para que se manden a llamar
        //las capas de forma dinámica. El valor final de i será igual al número de capas que declaren dentro del id mapas
        for (var i=0; i<2; i++) {
            layers[i].type = 'checkbox';
            G.event.addDomListener(layers[i], 'click', toggle)
        };
    };

    G.event.addDomListener(window, 'load', initialize);

</script>

Una vez explicada la parte del javascript vamos al html:


<!-- en este caso declaramos el div mapas y dentro de el una lista con los input que necesitemos, estás serán las capas que vamos 
  a agregar, el nombre del id es el nombre que se le dará a la capa, ejemplo Metro.kml (así sin el kml, pues lo declaramos arriba en
  el javascript) !-->
<div id="mapas">
<ul>
    <li align="left"><input id="Metro" rel="d1"/>Metro</li>
    <li align="left"><input id="AreasVerdes" rel="d2"/>Areas Verdes</li>
</ul>
</div>
<!-- en este div que le ponemos de nombre map (pues está ya definido en el javascript) declaramos el tamaño del que será el mapa 
  y eso es todo, tenemos nuestro código armado e integrado con algunas funciones de la API de maps !-->
<div id="map" style="width: 700px; height: 600px;"></div><br /><br />
Vamos a ver como queda el archivo final:
http://kaguamedia.com/api_google_maps.php
Espero les sirva de algo! :D
PD. Los kml y kmz usados en este tutorial fueron hechos por compañeros de trabajo, Hector y Luis, si lo llegan a leer muchas gracias, rockean durísimo! :D
Saludotes.
Komtec1

Comentarios

joan ha dicho que…
eso es para google map en el caso de google earth como se hace para mostrar varias kmz
joan ha dicho que…
Este comentario ha sido eliminado por el autor.
Komtec Uno ha dicho que…
Hola Joan, para google earth solo tienes que darle en abrir y te va mostrando las capas del lado izquierdo, ya tu las activas o desactivas según las necesites.

Saludos! :D
Javier G. ha dicho que…
Hola:

Gracias por darnos este ejemplo de la utilización de KMLs en Google Maps. He estado probando utilizar un los KMLs en un html que utiliza el API de Google Maps y KMLs basado en tu ejemplo. Esto lo hago en un hosting que contrate.
Al cargar la página solo me aparece el mapa pero no me aparece la información que del KML.
Sin embargo si cambio la url que le doy a la url de tu ejemplo si aparece. Tiene que ver algo con el alojamiento del que mando a llamar las KMLs. Te lo agradeceria mucho si me orientaras. Gracias.
Komtec Uno ha dicho que…
Hola Javier!

¿En local te funciona? en caso de que no cargue en local puede ser algún error que tengas en el javascript al integrarlo, también te recuerdo que el api de google maps no va a permitir más de 10 megas en un archivo kml, en caso de que tu archivo sea más grande te recomiendo usar la librería geoxml3.js y así de esta forma tener archivos más grandes que el tamaño permitido por google, ya que lo llama de forma local (/archivo.kml) y no por url completa (www.site.com/archivo.kml)

De todas formas si necesitas alguna otra ayuda, avísame y con gusto!

Saludos! :D

Komtec1
Javier G. ha dicho que…
Hola:

Gracias por contestar mi mensaje. En realidad para hacer las pruebas de funcionamiento de los KMLs tome uno de los KML del ejemplo (Azcapotzalco.kmz) que proporcionastes, solo lo subi al hosting que tengo y trate de invocarlo desde ahí. Al ver que no funcionaba se me ocurrio volver a ponerle la url original y asi si funciono. Por eso tenia duda si el alojamiento tenia que tener alguna caracteristica especial. Lo he intentado ejecutar en local host pero tampoco funciona ahí. Gracias. Saludos.
Komtec Uno ha dicho que…
Hola nuevamente Javier.

¿Los archivos los estás llamando con rutas completas? Ya que es forzoso que los llames de esa forma, por ejemplo:

Http://sitio.com/archivo.kml -> si funcionará

/Archivo.kml -> no funcionará

Revisa eso, si aún así no queda, puedes subir tu archivo a Patachin y con gusto te ayudó.

Saludos!

Komtec1
adan sernas ha dicho que…
Hola saludos a todos, primero que nada muchas gracias por el ejemplo, no me quedaba hasta que probe lo siguiente, coloque los archivos kml y kmz en un servidor con una direccion publica, y zaaas!! me funciono perfectamente, yo estaba intentando poner http://localhost/bla/bla/archivo.kmz y no funcionaba hasta que le puse http://ippublica.com/bla/archivo.kmz con eso solucione mi sutuacion, ojala que les pueda resolver a algunos, otra vez muchos saludooos chau!!
Marcos Viera ha dicho que…
Hola , estoy usando la api v3 y tengo el siguiente situación, necesito sacar las coordenadas al hacer clic en un punto del mapa, esto se consigue fácil, además uso kml para mostrar información, el problema es que al querer conseguir las coordenadas de un punto en kml no funciona.
Algún consejo que me puedan aportar
javierjava ha dicho que…
Disculpa en donde sacas los nombre de checkbox en donde dice metro ya que no miro que este declarado en el codigo ni en los archivo kml ni en kmz
Alfonso Cuevas ha dicho que…
Hola @javierjava,

Los nombres de los checkbox, son archivos kml, que está declarado en la carpeta kml

http://kaguamedia.com/kml/Metro.kml

Entonces al declarar aquí:

this.kmlLayer = new G.KmlLayer(
'http://kaguamedia.com/kml/' + this.id + '.kml', //ponemos la ruta de donde va a mandar a llamar los archivos.

Puedes poner la ruta que quieras, y los archivos que estén dentro de esa carpeta, tendrás que nombrarlos con el id del checkbox.
javierjava ha dicho que…
Muchas Gracias ya entendí como esta. Graciassssss...........

Entradas populares de este blog

Musimetría - música generada de forma automática por computadora.

Solución [fix] a hamachi Logging in .. failed, busy