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