Obtener la ubicación del usuario a través del navegador con javascript ?

geolocalizacion%2Bhtml

Introducción

En ocasiones en necesario conocer la ubicación de los usuarios que visitan nuestra pagina, con el fin de entregar información mas exacta relacionada con su perfil, y una de las varias herramientas que tenemos es la geolocalización vía javascript. El siguiente es un simple código html que podemos usar para geolocalizar un usuario desde el navegador:

Codigo

<!DOCTYPE html>
<html>
<head>
<title>Geolocalizacion</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div id="area-nav">
<div><h2>Pide permisos de hubicacion al navegador</h2></div>
<button id="pedirvan">Pedir permisos geolocalizacion navegador</button>
<div>por navegador</div>
<div id="nlat"></div>
<div id="nlon"></div>
</div>
</body>
<script>
$(document).ready(function () {
//Click al boton para pedir permisos
$("#pedirvan").click(function () {
//Si el navegador soporta geolocalizacion
if (!!navigator.geolocation) {
//Pedimos los datos de geolocalizacion al navegador
navigator.geolocation.getCurrentPosition(
//Si el navegador entrega los datos de geolocalizacion los imprimimos
function (position) {
window.alert("nav permitido");
$("#nlat").text(position.coords.latitude);
$("#nlon").text(position.coords.longitude);
},
//Si no los entrega manda un alerta de error
function () {
window.alert("nav no permitido");
}
);
}
});

});



</script>


</html>

Nota: este proceso pedirá permiso al usuario para acceder a su ubicación y al final dependera del usuario que este código funcione o no. Esos permiso se pueden configurar desde chrome://settings/content/location
Si lo que buscas es que si o si se obtenga la geolocalización puedes usar el api de google en este tutorial explico como realizar ese proceso.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *