Ejemplo de Geolocalización con HTML5 y Google Maps
Existen muchas técnicas para localizar un dispositivo a través de Internet, anteriormente para obtener la ubicación se necesitaba saber la dirección IP del cliente . Actualmente gracias a la W3C que ha incluido en HTML5 un conjunto de APIS que permiten a cualquier dispositivo móvil Iphone 3G, teléfonos Android e incluso a nuestro ordenador de escritorio; a través de JavaScript recuperar información de su posición en el mapa, hoy en día la mayoría de navegadores tienen soporte para geolocalización.
Estos son algunos navegadores soportados:
- Firefox 3.5 +: Sí
- Google Chrome 6 +: Sí
- iPhone Safari: Sí
- Opera 10 +: Sí
- Safari: Si
- Internet Explorer 9 + : Si
En este tutorial haré un simple ejemplo el cual mostrará la Latitud, Altitud donde estamos ubicados y ademas mostrar la posición en el mapa usando la API de Google MAPS.
Para comenzar hay que crear nuestro diseño en HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Posicionamiento con HTML , JavaScript y Google Maps</title>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#mapa_content {
height: 100%;
}
@media print {
html, body {
height: auto;
}
#mapa_content {
height: 650px;
}
</style>
<script type="text/javascript">
//Aquí va nuestro código
</script>
</head>
<body>
<div id="mapa_content"></div> <!-- Div contenedor del mapa -->
</body>
</html>
Ahora hay que programar las APIS que nos da HTML5 Y Google Maps
- inicializar() – Se encargará de detectar si el navegador soporta Geolocalización luego crear una nueva instancia del objeto de Google Maps
function inicializar() {
var opciones = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById('mapa_content'), opciones);
if (navigator.geolocation)
{
//Hago el CallBack a mostrarLocalizacion
navigator.geolocation.getCurrentPosition(mostrarLocalizacion,manejadorDeError);
}
else{
//Caso contraio muestro error
alert("Su navegador no soporta Geolocalizacion");
}
}
- mostrarLocalizacion(posicion) – Graficará en un div el mapa y su respectivo punto de nuestra posición.
function mostrarLocalizacion(posicion)
{
var pos = new google.maps.LatLng(posicion.coords.latitude,posicion.coords.longitude);
//Muestro un tooltip con un mensaje sobre el mapa
var infowindow = new google.maps.InfoWindow({
map: mapa,
position: pos,
content: 'Tu ubicacion usando HTML5.'
});
mapa.setCenter(pos);
}
- manejadorDeError(error) – Encarga de controlar todos los posibles errores que re presente en el caso.
function manejadorDeError(error) {
switch(error.code)
{
case error.PERMISSION_DENIED: alert("El usuario no permite compartir datos de geolocalizacion");
break;
case error.POSITION_UNAVAILABLE: alert("Imposible detectar la posicio actual");
break;
case error.TIMEOUT: alert("La posicion debe recuperar el tiempo de espera");
break;
default: alert("Error desconocido");
break;
}
var opciones = {
map: mapa,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(opciones);
mapa.setCenter(opciones.position);
}
El código final quedaría de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Posicionamiento con HTML , JavaScript y Google Maps</title>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#mapa_content {
height: 100%;
}
@media print {
html, body {
height: auto;
}
#mapa_content {
height: 650px;
}
</style>
<script type="text/javascript">
var mapa;
function inicializar() {
var opciones = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById('mapa_content'), opciones);
if (navigator.geolocation)
{
//Hago el CallBack a mostrarLocalizacion
navigator.geolocation.getCurrentPosition(mostrarLocalizacion,manejadorDeError);
}
else{
//Caso contraio muestro error
alert("Su navegador no soporta Geolocalizacion");
}
}
function mostrarLocalizacion(posicion)
{
var pos = new google.maps.LatLng(posicion.coords.latitude,posicion.coords.longitude);
//Muestro un tooltip con un mensaje sobre el mapa
var infowindow = new google.maps.InfoWindow({
map: mapa,
position: pos,
content: 'Tu ubicacion usando HTML5.'
});
mapa.setCenter(pos);
}
function manejadorDeError(error) {
switch(error.code)
{
case error.PERMISSION_DENIED: alert("El usuario no permite compartir datos de geolocalizacion");
break;
case error.POSITION_UNAVAILABLE: alert("Imposible detectar la posicio actual");
break;
case error.TIMEOUT: alert("La posicion debe recuperar el tiempo de espera");
break;
default: alert("Error desconocido");
break;
}
var opciones = {
map: mapa,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(opciones);
mapa.setCenter(opciones.position);
}
google.maps.event.addDomListener(window, 'load', inicializar);
</script>
</head>
<body>
<div id="mapa_content"></div> <!-- Div contenedor del mapa -->
</body>
</html>
Pueden una demostración del ejemplo :
Hay mucha información sobre este tema la W3C en el siguiente link:
JUAN CARLOS VIERA VELASCO
2 diciembre, 2015 at 8:12 am
Excelente explicación, Puedes por favor ayudarme indicando como muestro la posición en latitud y longitud con tu ejemplo, gracias
Alvargon
25 febrero, 2016 at 7:42 am
Joder muchas gracias, muy bien explicado y de fácil implementación. Cuesta encontrar código completo de esto xD
yennifer vargas
13 marzo, 2016 at 12:38 pm
hola, tengo una duda, cuando intento realizar esto, me manda una advertencia
NoApiKeys: Dice que no tiene un clave, y que necesito incluirla.
David Macan
8 julio, 2016 at 10:13 pm
Saludos, Genial información la que he adquirido aquí, pero tengo una gran duda, ¿Cómo inserto un botón para que el usuario pueda elegir cuando enviar sus datos de geolocalización?, y ¿Cómo guardo las coordenadas en una tabla MYSQL para luego tener en la base de datos las coordenadas que el usuario envía en el momento que haga clic en el botón?
Hunter
29 julio, 2018 at 8:30 pm
Buenas como puedo poner que me aparezca desde mi ubicacion a unos 70 metros?