NorfiPC
NorfiPC » Códigos » Localización y ubicación geográfica

Como detectar y mostrar la localización geográfica en las páginas web


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Códigos para mostrar en las páginas de un blog o sitio web la latitud, longitud, altura y un mapa con la ubicación geográfica de los lectores, usando la API de Geolocalización del W3C.
Como detectar y mostrar la localización geográfica en las páginas web de internet
Hay varias formas de determinar la localización y ubicación geográfica de las personas cuando acceden a internet.
Es sumamente útil para los sitios y empresas en internet que ofrecen servicios que difieren de acuerdo a la ubicación de los visitantes.
También para las aplicaciones y programas que usamos en nuestro dispositivo o equipo.
Podemos determinar y mostrar la localización de nuestros lectores en las páginas de nuestro blog o sitio de internet, para realizar distintas acciones, ofrecer contenido o mensajes de acuerdo al país, un formato o lenguaje diferente, etc. y de esa forma hacerlas más útiles, dinámicas y atractivas.



¿Cómo determinar la localización de los lectores en las páginas web?


En otras páginas de este sitio mostramos dos métodos de detectar y mostrar la localización de nuestros lectores:
Como mostrar la ubicación usando la API de localización de Google
Como detectar y mostrar el país de origen mediante la dirección IP
Varios servicios de internet brindan scripts y direcciones especiales que apuntan a ellos para esta misma tarea, pero no funcionan si estos sitios no están disponibles en ese momento o si existe mucho tráfico en la red.
Lo ideal es no depender de ningún servicio externo, el mejor de los métodos es usar la API de Geolocalización del W3C, que es sencilla en extremo y totalmente libre.
Consiste en insertar una porción de código en nuestras páginas.
A continuación se muestra un ejemplo práctico de su uso y más abajo puedes copiar el código utilizado.
Otro ejemplo en acción en este mismo sitio web puedes comprobarlo en: Saber mi localización y ubicación geográfica



Mi localización geográfica


Localización geográfica obtenida mediante la API de Geolocalización del W3C.

Ver en un mapa de Google la localización anterior




Localización geográfica mediante la API de Geolocalización del W3C


La API de Geolocalización del W3C es un esfuerzo por tratar de estandarizar un método para poder obtener información de la localización geográfica, desde el lado del usuario o cliente.
O sea el objetivo no es que los servicios o empresas de internet conozcan nuestra localización (para eso usan otros métodos), sino las aplicaciones que usamos en nuestro dispositivo o equipo (PC, Laptop, teléfono celular o tableta).
La API se vale de distintas fuentes de información disponibles a través de la red como es la dirección IP, los nodos Wi-Fi disponibles y otros que dependen de funcionalidades del dispositivo como las torres de telefonía celular GSM/CDMA y el GPS, si está incluido.
La información devuelta tiene cierta exactitud dependiendo del mejor de los métodos empleados.
Se obtiene una mayor exactitud en dispositivos portables como teléfonos celulares o tabletas.
En una PC o Laptop usando una conexión de internet por clave, solo se mostrará la ubicación que devuelve el proveedor de servicios de internet.
En todos los casos el navegador no puede enviar información a ningún servicio de localización sin el permiso expreso del usuario, por lo que al cargar una página que incluya algún script para esta función se mostrará una alerta solicitando aprobación.
Cuadro de confirmación en el navegador al usar la localización geográfica



Datos que se obtienen con la API de Geolocalización


Los datos que se obtienen mediante la API de Geolocalización del W3C, lógicamente dependen del dispositivo y los métodos, son los siguientes:
• La latitud y longitud geográfica, expresada en grados (WGS84).
Es la información principal ya que con ella se puede determinar el país, la zona, región, etc.
• La altura en metros (depende de un dispositivo GPS)
• La exactitud estimada.
• Timestamp (fecha/hora)



Códigos para mostrar la localización del usuario


Al comienzo de esta página usamos la API de Geolocalización para mostrar la latitud y longitud geográfica de cualquiera que cargue esta página, lógicamente se muestra solo si esa persona lo consiente.
Más abajo se muestra un pequeño mapa de Google Maps que carga usando los datos anteriores.

Como usar la API de Geolocalización del W3C


La API de Geolocalización del W3C es sencilla de utilizar.
La función "navigator.geolocation.getCurrentPosition()" devuelve las siguientes variables:
• position.coords.latitude - latitud
• position.coords.longitude - longitud
• position.coords.altitude - altura
• position.coords.accuracy – exactitud estimada
Un ejemplo elemental es el siguiente:
<script type="text/javascript">
var bloc = document.getElementById("bloque");
navigator.geolocation.getCurrentPosition(showPosition); 
function showPosition(position) {
bloc.innerHTML = "Latitud: " + position.coords.latitude + 
"<br>Longitud: " + position.coords.longitude;}
</script>

Para refrescar o actualizar la posición podemos usar un evento como un botón de la siguiente forma:
<button onclick="refrescarUbicacion()">Refrescar</button>
<script type="text/javascript">
function refrescarUbicacion() {	
navigator.geolocation.watchPosition(showPosition);}
</script>

El código empleado en esta página se muestra a continuación, puede utilizarse de dos formas:
1- Cargando el script con la página.
2- Usando un evento como un botón para iniciar la función, solo a petición del usuario (este ejemplo).



Códigos para copiar y pegar


Copia y pega el siguiente código en cualquier página, puede ser servida como PHP o HTML.

Hay que aclarar que en este caso no usamos la API de Geolocalización de Google, sino la del W3C y entonces con estos datos escribimos un mapa.
Parámetros a configurar en el código
• En el bloque o contenedor <div id='ubicacion'> se muestra los datos de la localización.
• En el bloque <div id="demo"> se escriben los mensajes de error, de existir alguno.
• En el bloque <div id="mapholder"></div> se escribe el mapa, puede especificarse cualquier tamaño cambiando los valores del ancho y la altura.
Un ejemplo del código anterior en acción, puedes verlo funcionando en la siguiente página de este sitio.
Permite conocer la latitud, longitud geográfica, altura y los datos anteriores se carga un mapa de Google Maps:
Saber mi localización y ubicación geográfica

Páginas relacionadas



Síguenos en las redes sociales de internet


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio


 
Inicio | Mapa del sitio | Sobre mí | RSS