Obtener la localización actual del usuario con jQuery

La API de geolocalización es una característica muy importante disponible en los navegadores web modernos que soportan HTML5, la cual nos permite obtener la ubicación actual del usuario utilizando JavaScript. La información sobre la ubicación está representada por las coordenadas de latitud y longitud. Por razones de privacidad, se requiere el permiso del usuario para poder acceder a la información de su ubicación.

Javascript y geolocalización

En nuestro Javascript utilizamos el método getCurrentPosition() para obtener la ubicación actual del usuario, pero primero necesitamos saber si la API de geolocalización está disponible en el navegador del usuario antes de poder continuar.

if ("geolocation" in navigator){ //check Geolocation available 
    //things to do
}else{
    console.log("Geolocation not available!");
}

Ahora obtenemos la ubicación del usuario tal que así:

if ("geolocation" in navigator){ //check geolocation available 
    //try to get user current location using getCurrentPosition() method
    navigator.geolocation.getCurrentPosition(function(position){ 
            console.log("Found your location nLat : "+position.coords.latitude+" nLang :"+ position.coords.longitude);
        });
}else{
    console.log("Browser doesn't support geolocation!");
}

jQuery

Una vez hemos obtenido la ubicación actual del usuario, podemos implementar este código Javascript en nuestro método click de jQuery

jQuery

$("#find_btn").click(function () { //user clicks button
    if ("geolocation" in navigator){ //check geolocation available 
        //try to get user current location using getCurrentPosition() method
        navigator.geolocation.getCurrentPosition(function(position){ 
                $("#result").html("Found your location 
Lat : "+position.coords.latitude+" Lang :"+ position.coords.longitude); }); }else{ console.log("Browser doesn't support geolocation!"); } });

HTML

<button id="find_btn">Find Me</button>
<div id="result"></div>

jQuery y API de Google Maps

Aquí tienes cómo incorporar un mapa de Google en tu código de Javascript

jQuery

<script type="text/javascript">
var map;
function initMap() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
map = new google.maps.Map($("#map")[0], {
        center: mapCenter,
        zoom: 8
      });
}

$("#find_btn").click(function (){
    if ("geolocation" in navigator){
            navigator.geolocation.getCurrentPosition(function(position){ 
                    infoWindow = new google.maps.InfoWindow({map: map});
                    var pos = {lat: position.coords.latitude, lng: position.coords.longitude};
                    infoWindow.setPosition(pos);
                    infoWindow.setContent("Found your location <br />Lat : "+position.coords.latitude+" </br>Lang :"+ position.coords.longitude);
                    map.panTo(pos);
                });
        }else{
            console.log("Browser doesn't support geolocation!");
    }
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

HTML

<button id="find_btn">Find Me</button>
<div id="map"></div>

Manejo de errores

Para gestionar cualquier error, podemos usar el segundo parámetro de getCurrentPosition(). Si algo falla, invocará un error callback, actualizando al usuario con el mensaje de error correspondiente. Vamos a ver un poco de código para que lo comprendas mejor.

Jquery

<script type="text/javascript">
var map;
function initMap() {
    map = new google.maps.Map($("#map")[0], {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
}

$("#my_location").click(function (){ //user click on button
    if ("geolocation" in navigator){
            navigator.geolocation.getCurrentPosition(show_location, show_error, {timeout:1000, enableHighAccuracy: true}); //position request
        }else{
            console.log("Browser doesn't support geolocation!");
    }
}); 

//Success Callback
function show_location(position){
    infoWindow = new google.maps.InfoWindow({map: map});
    var pos = {lat: position.coords.latitude, lng: position.coords.longitude};
    infoWindow.setPosition(pos);
    infoWindow.setContent('User Location found.');
    map.setCenter(pos);
}

//Error Callback
function show_error(error){
   switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("Permission denied by user.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("Location position unavailable.");
            break;
        case error.TIMEOUT:
            alert("Request timeout.");
            break;
        case error.UNKNOWN_ERROR:
            alert("Unknown error.");
            break;
    }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw-Viepxab4m9pRRQyjm_yRq1uhOj9iPc&callback=initMap" async defer></script>

HTML

<button id="my_location">Find Me</button>
<div id="map"></div>

En el tercer parámetro de getCurrentPosition(), el atributo enableHighAccuracy trata de proporcionar mejores resultados, pero esto puede causar una respuesta más lenta y puede aumentar el consumo de energía del dispositivo.

Fuente: sanwebe.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO