Blog
Una de las principales características de HTML5 es la API de geolocalización, ya que nos permite conocer la ubicación geográfica del usuario siempre que el navegador lo soporte.
En este tutorial vamos a realizar una función sencilla que obtenga y muestre la posición de un usuario en Java Script, esto nos sería de gran ayuda para aprender su funcionamiento.
Cómo obtener la posición de un usuario en Java Script
Con el siguiente código HTML y Java Script vamos obtener las coordenadas y mostrarlas en la página.
<html>
<head>
<title>Obtener la posición de un usuario en Java Script</title>
</head>
<body onload="getLocation()">
<div id="demo"></div>
<script>
// Esta función es la encargada de obtener las coordenadas y mostrarlas
// en la página
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
function(error) {
var x = document.getElementById("demo");
x.innerHTML = "Error "+error;
},
{timeout: 30000, enableHighAccuracy: true, maximumAge: 75000});
} else {
var x = document.getElementById("demo");
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
// Función que recibe una posicion y la muestra en la página
function showPosition(position) {
var x = document.getElementById("demo");
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Es importante ver que la función getLocation es ejecutada una vez que se carga completamente la página, esto se indica con el atributo onload de la etiqueta body.
Bueno gente, espero que les sea de gran utilidad este pequeño tutorial y ante cualquier inconveniente no duden en dejar un comentario.
Este código hace que te salga el recuadro en la parte superior del navegador, solicitando que aceptes la concesión de la ubicación en la que te encuentras? Como las imagenes siguientes querria conseguir hacer:
http://www.solvetic.com/uploads/monthly_08_2015/tutorials-8387-0-19880600-1440468422.jpg
https://noctuido.files.wordpress.com/2013/12/aemetgeoii.png
¿Dónde hay que introducir este código en WordPress?
Gracias
Hola Sergio, depende de lo que quieras hacer con las coordenadas, yo te recomiendo buscar algún plugin.