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.

Localizacion-HTML5

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:

Mi nombre es Neysi, soy desarrollador web me gusta compartir algunas cosas de tecnología, programación y SEO. Si te gusta mi contenido puedes seguirme en las redes sociales como @neysitc.

Publicado 09/10/2011 Actualizado 09/10/2011 Categoria: HTML5
Etiquetas: , ,

ESCRIBE UN COMENTARIO

  1. JUAN CARLOS VIERA VELASCO, comentó hace 2 años:

    Excelente explicación, Puedes por favor ayudarme indicando como muestro la posición en latitud y longitud con tu ejemplo, gracias

  2. Alvargon, comentó hace 2 años:

    Joder muchas gracias, muy bien explicado y de fácil implementación. Cuesta encontrar código completo de esto xD

  3. yennifer vargas, comentó hace 2 años:

    hola, tengo una duda, cuando intento realizar esto, me manda una advertencia
    NoApiKeys: Dice que no tiene un clave, y que necesito incluirla.

  4. David Macan, comentó hace 2 años:

    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?

  5. Hunter, comentó hace 1 mes:

    Buenas como puedo poner que me aparezca desde mi ubicacion a unos 70 metros?