Haciendo Web » Integración http://www.haciendoweb.cult.cu Mejorando la Intranet Cubana Tue, 21 May 2013 16:05:27 +0000 es-ES hourly 1 http://wordpress.org/?v=3.4.2 Usar geolocalización con Google Maps http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/ http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/#comments Mon, 09 Apr 2012 03:08:02 +0000 Juan Pablo Pérez Manes http://www.haciendoweb.cult.cu/?p=6965 google map logoEste tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5.

Nivel: Medio

¿Qué es la geolocalización?

Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.

Conociendo nuestra posición

Esta API destaca por lo fácil que es usarla. Por ejemplo:

<script>
     function localizame() {
           navigator.geolocation.getCurrentPosition(coordenadas);
     }

     function coordenadas(){
           var latitud = position.coords.latitude;
           var longitud = position.coords.longitude;
     }
</script>

Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición

Controlando errores

Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:

<script>
function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
}
</script>

Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:

<script>
        function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function errores(err) {
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }
</script>

Combinando la API de geolocalización con la API de Google Maps

Veamos los pasos directamente sobre los comentarios del código:

<!DOCTYPE html>
<html>
<head>
    <title>Localizador</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
    <style>
        body{
            font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>Localizador mediante HTML5</h1>
    </header>
    <section>
        <article>
            <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
        </article>
    </section>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/

    <script type="text/javascript">
        var map;
        var latitud;
        var longitud;

        $(document).ready(function() {
            localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
        });

        function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
            cargarMapa();
        }

        function errores(err) {
            /*Controlamos los posibles errores */
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }

        function cargarMapa() {
            var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
            var myOptions = {
                zoom: 17,
                center: latlon, /* Definimos la posicion del mapa con el punto */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
            map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */

            var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */

            var marcador = new google.maps.Marker({
/*Creamos un marcador*/
                position: coorMarcador, /*Lo situamos en nuestro punto */
                map: map, /* Lo vinculamos a nuestro mapa */
                title: "Dónde estoy?"
            });
        }
    </script>
</body>
</html>

Fuente: Cristalab

]]> http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/feed/ 0 Como agregar el boton “Me gusta” de Facebook a tu web http://www.haciendoweb.cult.cu/como-agregar-el-boton-me-gusta-de-facebook/ http://www.haciendoweb.cult.cu/como-agregar-el-boton-me-gusta-de-facebook/#comments Wed, 05 Oct 2011 16:29:50 +0000 Juan Pablo Pérez Manes http://www.haciendoweb.cult.cu/?p=1726 botón facebookEste botonsito se hace cada vez mas popular en FaceBook, y por efecto de cadena, cuando una persona clickea en me gusta, empiezan a aparecer más haciendo lo mismo, lo cual genera visitas gratuitas a tu web gracias a la inmensa comunidad de Facecebook.

Para agregar el boton “Me gusta” de Facebook a tu web, solo debes añadir este código y cambiar lo que está en azul por la dirección de la web donde pondrás el boton:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.tupagina.com/pagina.html&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" style="border: medium none; overflow: hidden; width: 450px; height: 35px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

Si quieres agregarlo a blogger, y que aparezca automáticamente en cada entrada de tu blog, debes ir a Diseño > Edicion html > Expandir plantillas de artilugios. y buscar (control + F) esta linea:

<p><data:post.body/></p>

y poner el siguiente código antes (para que aparezca bajo el titulo) o después (aparecerá bajo la entrada, sobre los comentarios) de esa linea:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&height=35&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px'/>

Saludos :)

Fuente: Creaweb

]]> http://www.haciendoweb.cult.cu/como-agregar-el-boton-me-gusta-de-facebook/feed/ 3