Geolocalización HTML5 | TIEngranaje

Aplicaciones web que se ocupan de ubicación puede beneficiarse directamente de saber exactamente dónde se encuentra el visitante de su sitio. Eso es donde Geolocalización entra en escena. La geolocalización es el proceso de averiguar dónde se encuentra en el mundo.

Con la diversidad de acceso de los clientes a su sitio, hay más de una manera para averiguar dónde se encuentra su usuario. Algunos de esos métodos incluyen la dirección IP del visitante, la torre celular con la que se comunica el dispositivo móvil y/o un componente de hardware de GPS dedicado que calcula la información de latitud y longitud.

¿Se puede desactivar?

Privacidad es una preocupación importante cuando está considerando el proceso de compartir su ubicación física con un servidor web remoto. Afortunadamente, la API de geolocalización establece: «Los agentes de usuario no deben enviar información de ubicación a sitios web sin el permiso expreso del usuario».

Por lo tanto, se requiere que el agente de usuario (navegador/aplicación cliente) solicite permiso antes de obtener la ubicación del usuario.

API de geolocalización

Geolocalización no es un elemento HTML nuevo, sino una API que le permite compartir su ubicación con un sitio web. La información se recopila en forma de datos de latitud y longitud que están disponibles para JavaScript.

La API de geolocalización es compatible con la mayoría de los navegadores modernos como Internet Explorer 9, Firefox, Chrome, Safari y Opera. No es compatible con versiones anteriores de Internet Explorer.

Ejemplo básico

La API de geolocalización se centra en una nueva propiedad en el objeto del navegador global navigator.geolocation. Aquí hay un ejemplo simple de cómo usar esta API:

function getLocation() {
    navigator.geolocation.getCurrentPosition(showPosition);
}

obtenerPosiciónActual()

El getCurrentPosition() El método devuelve un objeto si tiene éxito. Las propiedades de latitud, longitud y precisión siempre se devuelven. Las otras propiedades a continuación se devuelven si está disponible.

Sólo tres de las propiedades son garantizado estar disponible. Las tres propiedades son coords.latitude, coords.longitudey coords.accuracy. El resto de las propiedades puede o puede que no tienen valores, dependiendo de las capacidades del dispositivo del usuario.

El ejemplo anterior es demasiado simple. Como se mencionó anteriormente, no todos los navegadores admitirá esta API, o puede ocurrir un error al determinar la ubicación. Se sugiere que primero probemos si el navegador admite geolocalización services y, si lo hace, asegurémonos de que también podamos manejar los posibles errores que puedan ocurrir.

<button onclick="getLocation()">Get My Location</button>
<div id="Geo"></div>
<script>
    var x=document.getElementById("Geo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        } else {
            x.innerHTML="Geolocation is not supported by this browser.";
        }

        function showPosition(position) {
            x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 
        }

        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML="The user denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="The location information is not available."
                    break;
                case error.TIMEOUT:
                    x.innerHTML="The request to get the user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML="An unknown error occurred."
                    break;
            }
        }
    }
</script>

Mostrar la ubicación en un mapa

Para mostrar el resultado en un mapa, necesita acceso a un servicio de mapas que puede usar latitud y longitud. En el siguiente ejemplo, usamos los datos de latitud y longitud devueltos para mostrar la ubicación en un mapa de Google.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Geolocation Example</title>
    <style>
        #map1 {
            margin-top:15px;
            border:1px solid #7f7f7f;
            box-shadow:1px 1px 10px #7f7f7f;
            visibility:hidden;
        }
    </style>
</head>
<body>
    <div id="demo">
        Click the button to get your location!
        <button onclick="getLocation()">Get My Location!</button>
    </div>

    <div id="map1"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor;=false"></script>
    <script>
        var x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
                document.getElementById("map1").style.visibility = "visible";
            }
            else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            latlon = new google.maps.LatLng(lat, lon)
            myMap = document.getElementById('map1')
            myMap.style.height="480px";
            myMap.style.width="640px";

            var myOptions = {
                center: latlon, zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
            };
            var map = new google.maps.Map(document.getElementById("map1"), myOptions);
            var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is not available."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }
    </script>
</body>
</html>