Geolocalizando un usuario con HTML5 en Google Maps

06/Oct/2012 HTML5 , 1 Comentario

Ya hemos visto como podemos Geolocalizar a un usuario con HTML5 y como Incluir una marca en Google Maps. Así que ahora vamos a mezclar los dos ejemplos para Geolocalizar a un usuario con HTML5 y ubicarlo dentro de un mapa de Google Maps.

Lo primero será geolocalizar al usuario mediante el objeto navigator.geolocation.

  1. if (navigator.geolocation) {
  2. navigator.geolocation.getCurrentPosition(drawMap);
  3. } else {
  4. x.innerHTML="Geolocation is not supported by this browser.";
  5. }

En el caso de que el usuario tenga activada la capacidad de geolocalización lanzaremos la función drawMap en el método getCurrentPosition. Este método drawMap será el que pinte el mapa e inserte la marca en la posición ubicada del usuario.

Hay que recordar que la función de callback que se invoca desde getCurrentPosition recibirá un parámetro position con la longitud y latitud del usuario.

  1. function drawMap(position){...}

Lo primero que haremos en la función drawMap será crear un objeto LatLng de Google Maps a partir del objeto Position.

  1. var myLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

El objeto LatLng servirá para centrar el mapa y para añadir la marca. Lo primero será crear el mapa. Para ello utilizamos un objeto Map.

  1. var mapOptions = {
  2. zoom: 15,
  3. center: myLatLng,
  4. mapTypeId: google.maps.MapTypeId.ROADMAP
  5. };
  6.  
  7. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Y lo siguiente añadir la marca en la misma posición del objeto LatLng creando un objeto Marker:

  1. var marker = new google.maps.Marker({
  2. position: myLatLng,
  3. map: map,
  4. title:"Tu ubicación"
  5. });

Así ya tenemos geolocalizado a nuestro usuario con HTML5 y ubicado dentro de un mapa de Google Maps.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Geolocalizando un usuario con HTML5 en Google Maps”

Víctor Cuervo

Ruta Google Maps desde formulario - Línea de Código

[…] Vemos como utilizando el objeto Map hemos cargado el mapa sobre la capa que habíamos definido como map_canvas. En este caso no nos hemos complicado mucho la vida y hemos puesto un punto concreto del mapa. Pero si quieres hacerlo más cercano al usuario puedes ponerle su ubicación actual, para ello revisa el ejemplo Geolocalizando a un usuario con Google Maps y HTML5. […]

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*