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.

Geolocalizando al usuario

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){...}

Creando el objeto LatLng

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);

Dibujando el mapa

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);

Añadiendo la marca

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.