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