En esta entrada vamos a ver cómo añadir algo de geometría con la API de Google Maps, la capacidad de dibujar geometrías tiene muchas aplicaciones. Por ejemplo, puede servir para marcar áreas de interés en nuestro mapa, mostrar el resultado de operaciones de edición por parte del usuario, crear herramientas de introducción de datos geográficos, etc…

Antes de comenzar a trabajar con la API de Google Maps necesitaremos una API key, ya que Google Maps no es libre y su uso está sujeto a ciertas condiciones. Para obtenerla, hay que dirigirse a la sección para desarrolladores de Google (https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ES). Desde julio de 2018, la obtención de la API Key requiere además de una cuenta en la cual cargar el coste de los servicios consumidos. Sin embargo, cada cuenta dispone gratuitamente de 200$ mensuales, por lo que si no pasamos de esa cantidad, el uso de la API no supondrá ningún coste.

Para empezar, partiremos de un documento HMTL básico. Se incluirán las referencias de estilo para el mapa, así como una etiqueta <script> para llamar a la API de Google Maps, en la que habrá que indicar la API Key:

<!DOCTYPE html>
<html>
<head>
  <title>Geometría con Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
    #mapa {
      height: 100%
    }
  </style>
</head>
<body>
  <div id="mapa"></div>
  <script async src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=inicio"></script>

</body>
</html>

Procederemos a añadir el código del visor dentro de un nuevo elemento <script>.  Deberá contener la función que indicamos en el callback de llamada a la API (“inicio”, en este caso), de manera que cuando termine de cargarse la librería, se ejecute inmediatamente dicha función. Dentro de la función inicio se han incluido unas líneas para instanciar el mapa inicial:

<body>
  <div id="mapa"></div>
  <script async src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=inicio"></script>
  <script>
    function inicio() {
      var miMapa = new google.maps.Map(document.getElementById('mapa'), {
        center: { lat: 40, lng: -3.5 },
        zoom: 6
      });

    }
  </script>
</body>

Ahora se incluirá la geometría al mapa. Para ello, se definen unos arrays con los vértices de los objetos que se quieren representar. En este caso se creará una línea y un polígono:

      var verticesLinea = [
        { lat: 41.59, lng: -1.93 },
        { lat: 40.21, lng: -2.10 },
        { lat: 39.24, lng: -3.31 },
        { lat: 37.84, lng: -3.03 },
        { lat: 36.91, lng: -5.40 }
      ];

      var verticesPoligono = [
        { lat: 41.05, lng: -4.79 },
        { lat: 40.39, lng: -6.09 },
        { lat: 39.29, lng: -5.85 },
        { lat: 38.39, lng: -4.09 },
        { lat: 38.94, lng: -2.59 },
        { lat: 40.09, lng: -3.12 },
        { lat: 40.95, lng: -3.99 }
      ];

En la API de Google Maps, cada vértice se codifica mediante un objeto con las propiedades lat y lng, en referencia a latitud y longitud. Para dibujar la línea sobre el mapa, se usará la clase google.maps.Polyline:

      var linea = new google.maps.Polyline({
        path: verticesLinea,
        map: miMapa,
        strokeColor: 'rgb(255, 0, 0)',
        strokeWeight: 2
      });

En el caso de polígonos, se emplea google.maps.Polygon:

      var poligono = new google.maps.Polygon({
        path: verticesPoligono,
        map: miMapa,
        strokeColor: 'rgb(255, 0, 0)',
        fillColor: 'rgb(255, 255, 0)',
        strokeWeight: 4,
      });

El constructor de ambas clases recibe como argumento un objeto con una serie de propiedades. En path se introducirá el array de vértices que de definió anteriormente. En map se indicará el mapa que contendrá nuestras geometrías. Existen además otras opciones referidas al estilo de representación, como strokeColor (color de la línea o del borde del polígono), fillColor (color de relleno), entre otras.

Para acabar, incluiremos un popup solamente al polígono, de manera que se abra una pequeña ventana de información al hacer click sobre el:

      var popup = new google.maps.InfoWindow();

      poligono.addListener('click', function (e) {
        popup.setContent('Contenido');
        popup.setPosition(e.latLng);
        popup.open(miMapa);
      });

Si todo es correcto, cuando abramos el documento html con un navegador, podremos ver lo siguiente:

Espero que os haya gustado este pequeño tutorial. Si queréis saber más, echad un vistazo a nuestro curso de aplicaciones Web con ESRI, Carto, MapBox y Google Maps.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)

Cargando...

Formación de calidad impartida por profesionales