Geolocalización con HTML5

Ubicación de usuarios con Geolocalización HTML5
mapa

La geolocalización se logra en HTML5 gracias al potente API JavaScript combinada con el uso de Google Maps. De esta manera los desarrolladores, obtendremos la ubicación de los usuarios sobre un mapa.

La geolocalización se puede usar para diferentes fines, puedes ofrecer servicios dependiendo de la ubicación de usuario.

Demo: Geolocalización con HTML5

Al final de este articulo tendrán un link para descargar el código e implementarlo en sus proyectos, encontraran tres archivos un index.html que es la pagina principal un script.js que es la programacion de tras de este ejemplo y un style.css que es la hoja de estilos que utilice para darle el aspecto que tiene en el demo que mostramos anteriormente.

Index

Dentro de este archivo podemos encontrar la etiqueta <head></head>, dentro de ella esta la conexión a la API de Google Maps que nos ayuda a mostrar el mapa con la ubicación del usuario y también esta la conexión a nuestro código JavaScript, script.js. 

<head>
<!--API Google Maps-->
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!--API Google Maps-->

<!--Conexion con script.js-->
<script src="js/script.js" type="text/javascript"></script>
<!--Conexion con script.js-->
</head>

Tambien tenemos dentro del cuerpo una etiqueta p y un div que son importantes ya que es ahí donde se coloca el resultado de la conexión, el estatus y el mapa, es importare no cambiar los id ya que esos id los esta utilizando el script.js para mostrar los datos.

<p id="status">Buscando su localización…</p>
<div id="map"></div>
</div>

Script

En el código de este archivos JavaScript primero detectamos si el navegador soporta la geolocalización, luego pedimos las coordenadas del usuario, para esto el usuario tiene que aceptar si desea mostrar su ubicación ya que la configuración por defecto de la mayoría de los navegadores es así, una vez recibidas las coordenadas mostramos la ubicación del usuario en un mapa de Google. (Llamada a la Geolocation API, Mapa Google centrado en la posición del usuario, Error, Otras propiedades de getCurrentPosition() y La función watchPosition().)

function success(position) {
var status = document.querySelector('#status');
status.innerHTML = "¡Su ubicación!";

var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '100%';

document.querySelector('#map').appendChild(mapcanvas);

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Usted está aquí."
});
}

function error(msg) {
var status = document.getElementById('status');
status.innerHTML= "Error [" + error.code + "]: " + error.message;
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});
} else {
error('Actualiza el navegador web para usar el API de localización');
}

Descargar Código Geolocalizacion con HTML5

Descargar este artículo en PDF

Lo sentimos, esta opción solo está disponible para los socios. Más información de nuestro grupo de socios.


Angel Sanchez on FacebookAngel Sanchez on GithubAngel Sanchez on GoogleAngel Sanchez on InstagramAngel Sanchez on LinkedinAngel Sanchez on Twitter
Angel Sanchez
CEO en Azul Web
Fundador de Azul Web amante de la tecnología, me gusta compartir mis conocimientos y apoyar a las demás personas que desean tener un mejor desarrollo profesional. Toda persona que tenga un sueño y este luchando por él tiene mi respeto y mi apoyo.

Déjanos un comentario: