En esta entrada vamos a ver cómo implementar un visor muy sencillo con la API JavaScript de mapas más conocida en la actualidad: Google Maps. Probablemente todos hayamos utilizado este servicio de Google para localizar algún lugar o planificar una ruta. En realidad, la API JavaScript de Google Maps es mucho más capaz de lo que parece, ya que permite, entre otras cosas, visualización de datos personalizada, modificación del estilo del mapa, creación de controles personalizados, dibujar geometrías, cálculo de altitudes, distancias, etc…

Antes de comenzar, necesitaremos una API key, ya que Google Maps no es libre y su uso está sujeto a ciertas condiciones. Para practicar o incluso para desarrollar proyectos de pequeña envergadura, el plan estándar que ofrece la empresa puede ser suficiente. Nos permite un uso gratuito de la API hasta las 25.000 descargas diarias (podría traducirse en 25.000 visitas a nuestro visor). Para obtener una API key, habrá que dirigirse a la sección para desarrolladores de Google (https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ES), donde podremos solicitar una clave gratuita que se vinculará a nuestra cuenta.

Para empezar a codificar, crearemos un documento HTML5 con nuestro editor preferido. Incluiremos, dentro del encabezado, una sección de estilo para definir la apariencia del visor, que obligatoriamente debe contener la altura del elemento que contendrá el mapa (al que denominaremos mediante la id #mapa). Aparte, se definen también algunas propiedades del documento y del cuerpo del mismo. De este modo, el visor quedará configurado para ocupar toda la pantalla disponible:

<!DOCTYPE html>
<html>

<head>
  <title>Primer mapa 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>
</body>

</html>

 

Seguidamente, dentro del cuerpo del documento (etiqueta <body>) se incluirá el elemento de anclaje del mapa. Debe ser un <div>, con la id que creamos oportuno (en este ejemplo es #mapa):

<body>
  <div id="mapa"></div>
  
</body>

 

Después de definir el <div> del mapa, también dentro de <body> vamos a incluir una etiqueta <script> para llamar a la API de Google Maps. Es aquí donde hay que indicar nuestra API key junto con la URL de carga, necesaria para que los servidores de Google identifiquen al usuario y autoricen su uso:

<body>
  <div id="mapa"></div>
  <script async src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=funcionInicio"></script>
  
</body>

 

La llamada a la API contiene el atributo async, que habilitará al navegador para seguir cargando la página web mientras descarga la API, de forma asíncrona. La URL contiene también una referencia a una función callback (que denominaremos, por ejemplo, funcionInicio), lo que nos permitirá ejecutar dicha función una vez termine la descarga del código. Así, se garantiza que no se ejecuta nada antes de tener lista la API, de otro modo podría fallar.

La última parte consiste en la inclusión del código JavaScript en sí mismo, que introduciremos en una nueva etiqueta <script> dentro del cuerpo del documento html:

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

    }
  </script>
</body>

 

Lo primero es definir la función callback que se indicó en la URL de la API. Dentro de esta función se declara la variable que contendrá al objeto mapamiMapa, línea 26- y, seguidamente, se instancia mediante el constructor Map. La función Map requiere de dos elementos, una referencia al nodo del documento donde se anclará el mapa (el elemento <div> con id #mapa) y un objeto que contendrá las opciones del mapa recién creado. De dichas opciones, el nivel de zoom y las coordenadas donde se centrará la vista son obligatorias y deben especificarse siempre. El nodo de inserción lo podemos obtener mediante el método getElementById del objeto document, que localiza elementos del documento a través de su id.

Para acabar, añadiremos un marcador con información incrustada, la cual se mostrará cuando hagamos click sobre él. Lo primero es añadir un marcador al mapa, en las coordenadas que queremos mostrar, mediante el constructor Marker. Lo insertaremos a partir de la línea 30, dentro de funcionInicio:

var marcador = new google.maps.Marker({
  position: { lat: 40.4331148, lng: -3.7039044 },
  map: miMapa
});

 

Como vemos, el marcador tiene dos propiedades básicas, que son la posición geográfica y el mapa en el que debe colocarse. Con esto, si abrimos el visor ya veríamos el marcador en su sitio, pero no sería interactivo. Para lograrlo, hay que añadirle un listener, que responda a los eventos click del ratón mostrando una ventana de contenido, que se definirá mediante un elemento InfoWindow:

var contenido = new google.maps.InfoWindow({
  content: '<h3><a href="http://www.cursosgis.com">TYC GIS</a></h3>Calle Fuencarral 158  - Oficinas 16-17 (Entreplanta) <br>Teléfono: +34 910 325 482 <br>Email: info@tycgis.com'
});

marcador.addListener('click', function () {
  contenido.open(miMapa, marcador);
});

 

El método InfoWindow tiene la propiedad content, que almacenará el contenido html que queremos mostrar, dentro de la variable contenido. En la línea 39 se añade un listener al marcador que se declaró anteriormente, indicando como parámetros el tipo de evento al que debe esperar (evento click del ratón, en este caso) y la función que ejecutará en respuesta. Esta función se va a encargar de abrir el contenido del InfoWindow, mediante el método open, dentro del cual se indicará la referencia del mapa y del marcador al que irá asociado.

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

Aunque el visor de este ejemplo es muy básico, la API JavaScript de Google Maps permite mucho más. Si os interesa el tema y queréis tener una visión más profunda del uso y posibilidades de Google Maps, además de otras plataformas Web Mapping de primer nivel como Carto, Mapbox y ESRI, informaos sobre nuestro curso online de desarrollo de aplicaciones Web GIS.

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

Cargando…

Formación de calidad impartida por profesionales

Curso Online desarrollo aplicaciones CARTO