jueves, 20 de diciembre de 2012

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

martes, 18 de diciembre de 2012

Cambiar imágenes [casi] como encabezado de instagram :P

Hace poco vi el header en instagram en X perfil, me gustó mucho como se cambian las imágenes de forma aleatoria y se me ocurrió hacerlo en una web, me puse manos a la obra y salio el código que les explico y dejo a continuación :D :D :D

Primero que nada, me base en el siguiente código:
http://www.miguelmanchego.com/2009/recargar-texto-automaticamente-jquery-ajax/

Primero que nada, tenemos que invocar jQuery, despues agregamos el siguiente javascript:

<script language="javascript">
function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
    aleat = Math.random() * numPosibilidades
    aleat = Math.round(aleat)
    return parseInt(inferior) + aleat
} 

function recargar(){
    var cual = aleatorio(0,15)    
    var image = $("#probando"+cual);
    $("#probando"+cual).fadeOut(function() {
        $.post("get.php", {}, function(data){
        image.attr("src", data).fadeIn();
        });
    });
}
$actual=0;
timer = setInterval("recargar()", aleatorio(3000,9000));
</script>

En la funcion aleatorio definimos el tiempo en que van a recargar las fotos.

Despues en la funcion recargar, primero definimos un aleatorio entre 0 y 15, esto será para cuando coloquemos las imágenes, más adelante verán el por qué.

Agregamos la variable image con el id probando más la variable cual, que como lo mencioné antes, está en aleatorio.

Definimos que el id probando+cual tendrá un fadeOut para que se pueda desvanecer (esto lo invocamos con jQuery), despues dentro de las opciones de fadeOut declaramos una funcion en la que enviamos mediante un metodo (puede ser un post o un get, se que con el post ocupo un recurso que no necesito, se puede cambiar a get si les es más factible) la petición al archivo get.php, no le indicamos un contenido post y declaramos la funcion que nos regresará un valor, en este caso data, en esa función lo que hacemos es cambiar el atributo de image donde el id sea probando+cual y al último le agregamos un fadeIn() para que la muestre.

Ahora el archivo get.php contiene lo siguiente:

<?php
require_once("config.php");
$consulta = mysql_query("SELECT * FROM `tabla`");
    $numero = 0;
    while ($row=mysql_fetch_array($consulta))
    {
        $imagenes[$numero] = $row["imagen"];
        $numero++;
    }
        if($i%rand(1,$numero) == 1)
            echo 'img/default.jpg';
        else
        echo $imagenes[rand(0,$numero)];
        
?>

Llamo el archivo config por que lo hago mediante una conección de base de datos. Seguido hago una consulta y agrego los resultados en un arreglo, al final hago un echo para mostrar un simple texto que contiene la ruta del script, por ejemplo:

"img/archivo.jpg"   (sin las comillas claro)

Ustedes pueden modificar el archivo get para obtener la salida y la ruta que ustedes quieran, pueden hacer un listado de un directorio y de ahí mostrar solo uno, que se yo, lo que quieran :P

Ahora vamos a la parte que muestra las imágenes, en este caso lo acomode con tablas de la siguiente forma:

<table align="center" border="0">
<tr>
    <?php 
    $consulta = mysql_query("SELECT * FROM `tabla`);
    $numero = 0;
    $modal = 1;
    while ($row=mysql_fetch_array($consulta))
    {
        $imagenes[$numero] = $row["imagen"];
        $numero++;
    }
    for ($i=0; $i < 16; $i++) {
        if($i%rand(1,$numero) == 1)
        {
            echo "<td style='background: url(img/default.png) no-repeat center'>
            <img id='probando$i' src='img/default.jpg' width='175' height='109'></td>";
        }
        else
        {
            echo "<td style='background: url(img/default.png) no-repeat center'>
            <img id='probando$i' src='".$imagenes[rand(0,$numero)]."' alt='' width='175' height='109'></td>";
        }
            if ($modal%4==0)
            {
                echo "</tr>";
                if ($i<16)
                echo "<tr>";
            }
        $modal++;
    }
    ?>
</table>

Primero declaro una tabla, y seguido abro php, hago la consulta a la base de datos, declaro $numero como 0 y modal como 1, agrego en un array los valores que obtengo de la base de datos y despues empiezo a mostrar las imágenes, ocupo el modal por que acomodo 4 columnas de la tabla, lo que nos interesa aquí es la parte donde dice: id='probando$i' - esto es lo que nos va a agregar los id's de forma dinámica y en incremento +1 para que así nuestro javascript mande a llamar de forma correcta los id's que ocupa.

Les dejo un enlace de ejemplo de como funciona.

http://kaguamedia.com/header_tipo_instagram.php

Si tienen alguna duda aquí estamos para ayudar, no creo que sea la única forma de hacerlo, pero creo que si es sencilla :D y claro, ustedes pueden acomodar como guste, con diseño responsivo, con algunos divs, o alguna otra cosa para que quede conforme a su diseño.

PD. Si quieren ver como es el encabezado de instagram les dejo un enlace a un perfil

<shamed>
http://instagram.com/Alination
</shamed>

PD2. Si usan el script, me gustaría ver como quedo el final, compartan su enlace :D

Saludos! :D

Komtec1 - @Komtec1