Teníamos en DesarrolloWeb.com diversos artículos para localizar al usuario en diversos mapas de proveedores como por ejemplo Bing, pero no habíamos realizado anteriormente el ejercicio con los mapas de Google, que son realmente los más usados.

Aprovechando que la creación de Google Maps con Polymer es una tarea maravillosamente sencilla, vamos a explicar cómo situar una marca en el lugar donde se encuentra el visitante de nuestra página.

Ten en cuenta que vamos a necesitar algunos conocimientos de Polymer, que es la librería que nos facilita la creación de mapas. En concreto te recomendamos la lectura previa del artículo Mapas de Google con Polymer.

API Geolocation HTML5

Primero unas breves nociones sobre geolocalización. Básicamente es una de las API de HTML5 que nos permite acceder a las coordenadas de la localización de un usuario. Este API ya está comúnmente extendida entre todos los navegadores actuales, pero por seguridad siempre es bueno saber si el navegador del usuario tiene la característica de localización disponible.

if (navigator.geolocation) {
    // En este caso podemos usar la geolocalización
} else {
    // En este caso el navegador no es compatible con geolocalización
}

Como entenderás, navigator.geolocation estará disponible solo si el browser es compatible con el API HTML5 de geolocalización.

Para que funcione el usuario debe aceptar que el navegador lo localice y lo hará en base a los componentes hardware que tenga el ordenador o dispositivo, aunque el uso del hardware se hace de manera transparente para el desarrollador. En cualquier caso, nosotros como desarrolladores realizaremos un intento de localizar al usuario y si este intento funcionó correctamente, entonces podremos acceder a los datos de su posición geográfica. Lo veremos en código.

navigator.geolocation.getCurrentPosition(function(tuPosicion) {
  // en esta función podemos acceder a tuPosicion.coords para localizar al user.
  // ese objeto tiene las propiedades .latitude y longitude
});

Observa que getCurrentPosition() realiza el intento de localizar al usuario. Luego a este método le pasamos una función que se ejecutará solo en el caso que el usuario haya aceptado que le localicen físicamente. A esa función le llega un parámetro que es el objeto donde se encuentran los datos resultado de la localización geográfica. En seguida veremos cómo manejar ese objeto ya con el ejemplo que nos ocupa.

Crear un mapa de Google con datos predeterminados

Ya para resolver nuestra práctica, vamos a crear un mapa de Google en el que no cargaremos nada en particular, puesto que las marcas las colocaremos de manera programática, mediante Javascript, una vez que tengamos acceso a la geolocalización del usuario.

Como dijimos, usaremos elementos de Web Components (custom elements) que están en el catálogo de elementos de Polymer, en concreto tendremos que instalar "google-map" y "google-map-marker". De esto es lo que versaba el artículo anterior de mapas de Google, por lo que no vamos a repetir cómo instalar estos componentes en la página.

<google-map id="mapa" latitude="0" longitude="0" fit-to-markers></google-map>

En la latitud 0 y longitud 0 encontramos mar abierto, por lo que si cargas ese mapa tal cual y sin indicarle un zoom en particular, veremos todo en azul. Para nuestro ejemplo podríamos perfectamente no indicar los atributos "latitude" y "longitude", con lo que se cargaría el mapa en la posición predeterminada para este componente.

Es interesante mencionar el atributo "fit-to-markers" que nos permite que el zoom del mapa se ajuste a lo necesario para que se vean las marcas que se hayan colocado. Nuevamente, como no hay marcas, no servirá de mucho todavía, pero enseguida se las colocaremos con Javascript.

También fíjate que hemos colocado un identificador al mapa id="mapa", para luego acceder a él desde Javascript.

Cómo colocar una marca en la posición geográfica

Ya la última parte del ejercicio consiste en colocar una marca dentro de este mapa. Usaremos el componente de Web Components y lo crearemos dinámicamente con Javascript, solo en el caso que el intento de geolocalización sea permitido.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var marca = document.createElement('google-map-marker');
    marca.setAttribute('latitude', position.coords.latitude);
    marca.setAttribute('longitude', position.coords.longitude);
    marca.setAttribute('title', 'Estás aquí');
    Polymer.dom(document.getElementById('mapa')).appendChild(marca);
  });
} else {
  alert("Navegador no compatible con geolocalización")
}

En este ejercicio la dificultad estriba en crear el sistema para generar esa marca programáticamente. Aunque en realidad es fácil.

Creamos el elemento con document.createElement('google-map-marker') y lo guardamos en una variable "marca".

Luego configuramos la marca por medio de la definición de sus atributos latitude y longitude, a los que asignamos los valores recibidos en la geolocalización.

Por último asociamos la marca al mapa de Google. Atención que esta parte tiene que hacerse por medio del método Polymer.dom(). Este método nos permite manipular el DOM de Polymer, tanto el DOM nativo como el Local DOM de los Web Components como el Ligth DOM implementado por Polymer.

Polymer.dom(document.getElementById('mapa')).appendChild(marca);

Este paso nos creará la marca dentro del mapa y gracias al atributo "fit-to-markers" que habíamos colocado en el propio mapa, el navegador nos redirigirá a la posición del mapa donde se encuentra la marca situada.

Conclusión

Realmente eso es todo, resulta muy sencillo como has podido comprobar. Esperamos que lo hayas comprendido y lo puedas poner en práctica fácilmente. Para que nadie se pierda, a continuación encuentras el código completo de esta práctica de geolocalización y mapas de google.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>geolocalizacion</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/google-map/google-map.html">
  <link rel="import" href="bower_components/google-map/google-map-marker.html">
  <style>
    google-map {
      height: 400px;
    }
  </style>
</head>
<body>
  <google-map id="mapa" latitude="0" longitude="0" fit-to-markers></google-map>
  <script>
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var marca = document.createElement('google-map-marker');
        marca.setAttribute('latitude', position.coords.latitude);
        marca.setAttribute('longitude', position.coords.longitude);
        marca.setAttribute('title', 'Estás aquí');
        Polymer.dom(document.getElementById('mapa')).appendChild(marca);
      });
    } else {
      alert("Navegador no compatible con geolocalización")
    }
  </script>
</body>
</html>