Comunidad de diseño web y desarrollo en internet

Usar geolocalización con Google Maps

Este 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:

Código :

<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:

Código :

<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:

Código :

<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:

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>


Pincha aquí para ver el ejemplo completo.

Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate