Geolocalizando un usuario con HTML5 en Google Maps

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.

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

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.

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.

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.

var mapOptions = {
  zoom: 15,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
					
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:

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

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

Publicaciones relacionadas:

Geolocalizando a un usuario con HTML5 Microdata para una geolocalización con HTML5 Tipos de mapas con Google Maps Tiempo visualizado del vídeo en HTML5 Modificando propiedades CSS con un Slider