Cómo agregar un mapa a tu sitio web (JavaScript)

1. Antes de comenzar

En este codelab, aprenderás todo lo que necesitas para comenzar a usar Google Maps Platform para la Web. Aprenderás todos los conceptos básicos, desde cómo hacer la configuración hasta cómo cargar la API de Maps JavaScript, cómo mostrar tu primer mapa, cómo trabajar con marcadores y agruparlos en clústeres, cómo dibujar sobre el mapa y cómo controlar la interacción con el usuario.

Qué crearás

e52623cb8578d625.png

En este codelab, crearás una aplicación web simple que hace lo siguiente:

  • Carga la API de Maps JavaScript.
  • Muestra un mapa centrado en Sídney, Australia.
  • Muestra marcadores personalizados de atracciones populares en Sídney.
  • Implementa el agrupamiento de marcadores en clústeres.
  • Habilita la interacción del usuario a fin de que, cuando se hace clic en un marcador, se dibuje un círculo sobre el mapa y este vuelva a centrarse.

Qué aprenderás

  • Cómo comenzar a utilizar Google Maps Platform
  • Cómo cargar la API de Maps JavaScript de forma dinámica mediante código JavaScript
  • Cómo cargar un mapa
  • Cómo usar marcadores, marcadores personalizados y agrupamiento de marcadores en clústeres
  • Cómo trabajar con el sistema de eventos de la API de Maps JavaScript para permitir la interacción del usuario
  • Cómo controlar el mapa de forma dinámica
  • Cómo dibujar sobre el mapa

2. Requisitos previos

Deberás familiarizarte con los siguientes elementos para completar este codelab. Si ya sabes cómo trabajar con Google Maps Platform, pasa directamente al codelab.

Productos obligatorios de Google Maps Platform

En este codelab, usarás los siguientes productos de Google Maps Platform:

Otros requisitos de este codelab

Para completar este codelab, necesitarás las siguientes cuentas, servicios y herramientas:

  • Una cuenta de Google Cloud Platform con facturación habilitada
  • Una clave de API de Google Maps Platform con la API de Maps JavaScript habilitada
  • Conocimientos básicos de JavaScript, HTML y CSS
  • Node.js instalado en tu computadora
  • El editor de texto o IDE que prefieras

Cómo comenzar a utilizar Google Maps Platform

Si nunca usaste Google Maps Platform, sigue la guía Cómo comenzar a utilizar Google Maps Platform o mira la lista de reproducción Cómo comenzar a utilizar Google Maps Platform para completar los siguientes pasos:

  1. Crear una cuenta de facturación
  2. Crear un proyecto
  3. Habilitar las API y los SDK de Google Maps Platform (enumerados en la sección anterior)
  4. Generar una clave de API

3. Prepárate

Configura Google Maps Platform

Si todavía no tienes una cuenta de Google Cloud Platform y un proyecto con la facturación habilitada, consulta la guía Cómo comenzar a utilizar Google Maps Platform para crear una cuenta de facturación y un proyecto.

  1. En Cloud Console, haz clic en el menú desplegable del proyecto y selecciona el proyecto que deseas usar para este codelab.

  1. Habilita las API y los SDK de Google Maps Platform necesarios para este codelab en Google Cloud Marketplace. Para hacerlo, sigue los pasos que se indican en este video o esta documentación.
  2. Genera una clave de API en la página Credenciales de Cloud Console. Puedes seguir los pasos que se indican en este video o esta documentación. Todas las solicitudes a Google Maps Platform requieren una clave de API.

Configuración de Node.js

Si todavía no lo tienes, ve a https://nodejs.org/ para descargar y, luego, instalar el entorno de ejecución de Node.js en tu computadora.

Node.js incluye el administrador de paquetes npm, que necesitas para instalar las dependencias que requiere este codelab.

Configuración de la plantilla de proyecto inicial

Antes de comenzar este codelab, haz lo siguiente para descargar la plantilla de proyecto inicial y el código completo de la solución:

  1. Descarga o bifurca el repositorio de GitHub correspondiente a este codelab, que puedes encontrar en https://github.com/googlecodelabs/maps-platform-101js.

El proyecto inicial se encuentra en el directorio /starter y tiene la estructura de archivos básica que utilizarás para completar el codelab. Todo lo que necesitas para este proyecto se encuentra en el directorio /starter/src. 2. Una vez que hayas descargado el proyecto inicial, ejecuta npm install en el directorio /starter. Con ese comando, instalas todas las dependencias necesarias enumeradas en el archivo package.json. 3. Una vez instaladas las dependencias, ejecuta npm start en el directorio.

El proyecto inicial se configuró para que uses webpack-dev-server, que compila y ejecuta el código que escribes de manera local. webpack-dev-server también vuelve a cargar tu app automáticamente en el navegador cada vez que realices cambios en el código.

Si deseas ver el código completo de la solución en ejecución, puedes completar los pasos de configuración detallados arriba en el directorio /solution.

4. Carga la API de Maps JavaScript

Antes de comenzar, asegúrate de seguir los pasos indicados en Prepárate. ¿Terminaste? Bien, ahora ya puedes crear tu primera aplicación web utilizando Google Maps Platform.

El uso de Google Maps Platform para la Web se basa en la API de Maps JavaScript. Esta API proporciona una interfaz de JavaScript para usar todas las funciones de Google Maps Platform, incluidos el mapa, los marcadores, las herramientas de dibujo y otros servicios de Google Maps Platform, como Places.

Si tienes experiencia previa con esta API, es posible que, para cargarla, acostumbres insertar una etiqueta script en un archivo HTML de la siguiente manera:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Esta sigue siendo una forma perfectamente válida para cargar la API, pero en JavaScript moderno, las dependencias suelen incluirse de forma dinámica mediante el código. Para lograr el equivalente de esta etiqueta script en el código, usa el módulo @googlemaps/js-api-loader. El cargador de API de JS ya está incluido en las dependencias del archivo package.json del proyecto, de modo que se instaló cuando ejecutaste npm install anteriormente.

Para usar el cargador de API de JS, haz lo siguiente:

  1. Abre /src/app.js. Este archivo es donde realizarás todo el trabajo de este codelab.
  2. Importa la clase Loader desde @googlemaps/js-api-loader.

    Agrega lo siguiente en la parte superior de app.js:
     import { Loader } from '@googlemaps/js-api-loader';
  3. Crea un objeto apiOptions.

    La clase Loader requiere un objeto JSON que especifica varias opciones para cargar la API de Maps JavaScript, incluida tu clave de API de Google Maps Platform, qué versión de la API deseas cargar y las bibliotecas proporcionadas por la API de Maps JS que desees cargar. Para los fines de este codelab, solo debes agregar lo siguiente a app.js a fin de especificar la clave de API:
     const apiOptions = {
   apiKey: "YOUR API KEY"
 }
  4. Crea una instancia de Loader y pásale tu objeto apiOptions.
     const loader = new Loader(apiOptions);
  5. Carga la API de Maps JS.

    Para cargar la API, llama a load() en la instancia de Loader. El cargador de la API de JS devuelve una promesa que se resuelve una vez que la API está cargada y lista para usarse. Agrega el siguiente stub para cargar la API y controlar la promesa:
     loader.load().then(() => {
   console.log('Maps JS API loaded');
 });

Si todo funciona correctamente, deberías ver la sentencia console.log en la consola del navegador:

4fa88d1618cc7fd.png

En resumen, ahora cargaste de manera dinámica la API de Maps JavaScript mediante el código y definiste la función de devolución de llamada que se ejecuta una vez que la API de Maps JavaScript termina de cargarse.

Tu archivo app.js debería ser similar a lo siguiente:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

Ahora que la API de Maps JavaScript está cargada, cargarás el mapa en el paso siguiente.

5. Muestra un mapa

Es hora de mostrar tu primer mapa.

La parte más usada de la API de Maps JavaScript es google.maps.Map, que es la clase que nos permite crear y manipular instancias de mapa. Para ver cómo se hace, crea una función nueva llamada displayMap().

  1. Define la configuración de tu mapa.

    La API de Maps JavaScript admite una variedad de configuraciones diferentes para el mapa, pero solo dos son obligatorias:
    • center: Establece la latitud y longitud para el centro del mapa.
    • zoom: Establece el nivel de zoom inicial del mapa.
    Utiliza el siguiente código para centrar el mapa en Sídney, Australia y proporcionar un nivel de zoom de 14, que es el adecuado para mostrar el centro de la ciudad.
     function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
  2. Obtén el div donde debe insertarse el mapa en el DOM.

    Para poder mostrar el mapa, debes indicarle a la API de Maps JavaScript dónde quieres que aparezca en la página. Si observas rápidamente el archivo index.html, verás que ya hay un div similar a este:
     <div id="map"></div>
    A fin de indicarle a la API de Maps JavaScript el lugar donde deseas insertar el mapa, usa el método document.getElementById para obtener su referencia en el DOM:
     const mapDiv = document.getElementById('map');
  3. Crea una instancia de google.maps.Map.

    Para pedirle a la API de Maps JavaScript que genere un mapa nuevo que se pueda mostrar, crea una instancia de google.maps.Map y pásale los elementos mapDiv y mapOptions. También se devuelve la instancia de Map de esta función para que puedas utilizarla más adelante:
     const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
  4. Muestra el mapa.

    Una vez que definas toda la lógica para crear tu instancia de mapa, solo falta llamar a displayMap() desde el controlador de promesas de la API de JS para que se llame cuando se haya cargado la API de Maps JavaScript:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });

Ahora deberías ver un hermoso mapa de Sídney en tu navegador:

fb0cd6bc38532780.png

En resumen, en este paso definiste las opciones de visualización para el mapa, creaste una nueva instancia de mapa y la insertaste en el DOM.

Tu función displayMap() debería ser similar al código siguiente:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Diseño de mapas basado en Cloud (opcional)

Puedes personalizar el estilo de tu mapa con el diseño de mapas basado en Cloud.

Crea un ID de mapa

Si todavía no creaste un ID de mapa con un estilo de mapa asociado, consulta la guía sobre ID de mapa para completar los siguientes pasos:

  1. Crear un ID de mapa
  2. Asociar un ID de mapa a un estilo de mapa

Cómo agregar el ID de mapa a tu app

Para usar el ID de mapa que creaste, modifica la función displayMap en el archivo app.js y pasa tu ID de mapa en la propiedad mapId del objeto mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Una vez que hayas completado esto, ahora deberías ver el estilo que seleccionaste en el mapa.

7. Agrega marcadores al mapa

Hay muchas cosas que los desarrolladores hacen con la API de Maps JavaScript, pero colocar marcadores en el mapa es definitivamente la más popular. Los marcadores te permiten mostrar puntos específicos en el mapa y son elementos de la IU comunes para controlar la interacción del usuario. Si ya usaste Google Maps, es probable que conozcas el marcador predeterminado, que es el que se ve en la imagen siguiente:

590815267846f166.png

En este paso, usarás google.maps.Marker para colocar marcadores en el mapa.

  1. Define un objeto para las ubicaciones de tus marcadores.

    Para comenzar, crea una nueva función addMarkers() y declara un objeto locations que tenga el siguiente conjunto de puntos de latitud y longitud para las atracciones turísticas populares en Sídney.

    Además, ten en cuenta que debes pasarle tu instancia de Map a la función. La usarás más adelante cuando crees tus instancias de marcador.
     function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }
  2. Crea una instancia de google.maps.Marker para cada marcador que quieras mostrar.

    A fin de crear tus marcadores, usa el siguiente código para iterar recorriendo el objeto locations con un bucle for...in, crear un conjunto de opciones para representar cada marcador y, luego, crear una instancia de google.maps.Marker para cada ubicación.

    Observa la propiedad icon de markerOptions. ¿Recuerdas el pin de mapa predeterminado que vimos antes? ¿Sabías que también puedes personalizarlo para que muestre la imagen que desees? A continuación, se explica cómo hacerlo.

    La propiedad icon te permite proporcionar la ruta a cualquier archivo de imagen que desees usar como marcador personalizado. Si comenzaste este codelab con nuestra plantilla de proyecto, ya hay una imagen incluida en /src/images.

    Ten en cuenta también que necesitas guardar tus instancias de marcadores en un array y devolverlas en la función para poder usarlas más adelante.
     const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
  3. Muestra los marcadores.

    La API de Maps JavaScript crea y muestra automáticamente un marcador cada vez que se crea una nueva instancia de google.maps.Marker. Por eso, solo debes actualizar el controlador de promesa de la API de JS para llamar a addMarkers(). y pasarle tu instancia de Map:
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });

Ahora deberías ver marcadores personalizados en el mapa:

1e4a55de15215480.png

En resumen, en este paso definiste un conjunto de ubicaciones para los marcadores y creaste una instancia de google.maps.Marker con un ícono de marcador personalizado para cada ubicación.

Tu función addMarkers() debería ser similar al código siguiente:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

En el siguiente paso, verás cómo mejorar la experiencia del usuario de los marcadores con el agrupamiento de marcadores en clústeres.

8. Habilita el agrupamiento de marcadores en clústeres

Si usas muchos marcadores o marcadores que están muy cerca entre ellos, puedes encontrarte con el problema de que se superpongan o se vean demasiado juntos, lo que generará una mala experiencia del usuario. Por ejemplo, después de crear los marcadores en el último paso, es posible que hayas notado lo siguiente:

6e39736160c6bce4.png

Para casos como este resulta útil el agrupamiento de marcadores en clústeres. Es una función que se utiliza comúnmente a fin de agrupar los marcadores cercanos en un mismo ícono que cambia según el nivel de zoom de la siguiente manera:

4f372caab95d7499.png

El algoritmo utilizado para el agrupamiento de marcadores en clústeres divide el área visible del mapa en una cuadrícula y, luego, agrupa los íconos que se encuentran en la misma celda. Afortunadamente, no tienes que preocuparte por eso porque el equipo de Google Maps Platform creó una biblioteca de utilidades de código abierto muy útil llamada MarkerClustererPlus que hace todo por ti automáticamente. Puedes ver el código fuente de MarkerClustererPlus en GitHub.

  1. Importa MarkerCluster.

    En el proyecto de plantilla de este codelab, la biblioteca de utilidades MarkerClustererPlus ya está incluida en las dependencias declaradas en el archivo package.json. Por eso, ya la instalaste cuando ejecutaste npm install al comienzo de este codelab.

    Para importar la biblioteca, agrega lo siguiente a la parte superior de tu archivo app.js:
     import MarkerClusterer from '@google/markerclustererplus';
  2. Crea una nueva instancia de MarkerClusterer.

    Para crear clústeres de marcadores, debes hacer dos cosas: proporcionar los íconos que deseas utilizar para tus clústeres de marcadores y crear una nueva instancia de MarkerClusterer.

    Primero, declara un objeto que especifique la ruta de los íconos que deseas usar. En el proyecto de plantilla, ya hay un conjunto de imágenes guardadas en ./img/m. Observa que los nombres de los archivos de imagen están numerados de manera secuencial con el mismo prefijo: m1.png, m2.png, m3.png, etcétera.

    Cuando configuras la propiedad imagePath en las opciones del agrupador de marcadores, simplemente proporcionas la ruta y el prefijo del archivo. El agrupador utiliza automáticamente todos los archivos con ese prefijo y anexa un número al final.

    Segundo, crea una instancia nueva de MarkerClusterer y pásale la instancia de Map donde deseas que se muestren los clústeres de marcadores y el array con las instancias de Marker que deseas agrupar en clústeres.
     function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
  3. Muestra los clústeres de marcadores.

    Llama a clusterMarkers() desde el controlador de promesas de la API de JS. Los clústeres de marcadores se agregan de forma automática al mapa cuando se crea la instancia de MarkerClusterer en la llamada a función.
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });

Ahora deberías ver algunos clústeres de marcadores en tu mapa.

e52623cb8578d625.png

Ten en cuenta que, si acercas o alejas el mapa, MarkerClustererPlus cambia automáticamente el número y el tamaño de los clústeres. También puedes hacer clic en el ícono de cualquier clúster de marcadores para acercar y ver todos los marcadores incluidos en ese clúster.

d572fa11aca13eeb.png

En resumen, en este paso importaste la biblioteca de utilidades MarkerClustererPlus de código abierto y la usaste para crear una instancia de MarkerClusterer que agrupa automáticamente los marcadores que creaste en el paso anterior.

Tu función clusterMarkers() debería ser similar al código siguiente:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

A continuación, aprenderás a controlar la interacción del usuario.

9. Agrega interacción del usuario

Ahora tienes un mapa increíble que muestra algunos de los destinos turísticos más populares de Sídney. En este paso, agregarás cierto control adicional de las interacciones del usuario mediante el sistema de eventos de la API de Maps JavaScript para mejorar aún más la experiencia del usuario de tu mapa.

La API de Maps JavaScript proporciona un sistema de eventos integral que usa controladores de eventos de JavaScript para permitirte manejar varias interacciones del usuario en el código. Por ejemplo, puedes crear objetos de escucha de eventos a fin de activar la ejecución del código para interacciones tales como cuando el usuario hace clic en el mapa y los marcadores, desplaza lateralmente la vista del mapa, acerca y aleja el mapa, y mucho más.

En este paso, agregarás un objeto de escucha de clics a tus marcadores y, luego, harás que el mapa se desplace lateralmente de manera programática para que el marcador en el que hizo clic el usuario quede en el centro del mapa.

  1. Configura un objeto de escucha de clics en tus marcadores.

    Todos los objetos de la API de Maps JavaScript que admiten el sistema de eventos implementan un conjunto estándar de funciones para controlar la interacción del usuario, por ejemplo, addListener y removeListener, entre otras.

    A fin de agregar un objeto de escucha de eventos de clic a cada marcador, itera recorriendo el array markers y llama a addListener en la instancia del marcador correspondiente para adjuntar un objeto de escucha del evento click:
     function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
  2. Haz que el mapa se desplace lateralmente hasta un marcador cuando se hace clic en él.

    El evento click se activa cada vez que un usuario hace clic en un marcador o lo presiona, y devuelve un evento como objeto JSON con información sobre el elemento de la IU en el que se hizo clic. Para mejorar la experiencia del usuario del mapa, puedes controlar el evento click y usar su objeto LatLng a fin de obtener la latitud y longitud del marcador en el que se hizo clic.

    Una vez que tienes esa información, simplemente pásala a la función panTo() integrada en la instancia de Map para que el mapa se desplace lateralmente sin problemas y vuelva a centrarse en torno al marcador en el que se hizo clic. Para ello, agrega lo siguiente en la función de devolución de llamada del controlador del evento:
     const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
  3. Asigna los objetos de escucha de clics.

    Llama a addPanToMarker() desde el controlador de promesas de la API de JS y pásale el mapa y los marcadores para ejecutar el código y asignar los objetos de escucha de clics.
     loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Ahora, ve al navegador y haz clic en tus marcadores. Deberías ver que el mapa se desplaza lateralmente de forma automática para volver a centrarse cada vez que se hace clic en un marcador.

En resumen, en este paso usaste el sistema de eventos de la API de Maps JavaScript para asignar un objeto de escucha de clics a todos los marcadores del mapa, recuperaste la latitud y la longitud del marcador del evento de clic que se activó y empleaste esa información para que el mapa vuelva a centrarse cada vez que se hace clic en un marcador.

Tu función addPanToMarker() debería ser similar al código siguiente:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Solo falta un paso más. A continuación, mejorarás la experiencia del usuario del mapa mediante las funciones de dibujo de la API de Maps JavaScript.

10. Dibuja en el mapa

Hasta ahora, creaste un mapa de Sídney, que muestra marcadores de destinos turísticos populares y controla la interacción del usuario. En el último paso de este codelab, usarás las funciones de dibujo de la API de Maps JavaScript para agregar una característica útil adicional a la experiencia de tu mapa.

Imagina que a este mapa lo utilizarán usuarios que desean explorar la ciudad de Sídney. Una función útil sería visualizar un radio alrededor de un marcador cuando se hace clic en él. Esto permitiría que el usuario vea rápidamente qué otros destinos están muy cerca del marcador en el que hizo clic, a los cuales puede llegar fácilmente a pie.

La API de Maps JavaScript incluye un conjunto de funciones para dibujar formas sobre el mapa, como cuadrados, polígonos, líneas y círculos. Luego, renderizarás un círculo para mostrar un radio de 800 metros (aproximadamente media milla) alrededor de un marcador cuando se hace clic en él.

  1. Dibuja un círculo con google.maps.Circle.

    Las funciones de dibujo de la API de Maps JavaScript te ofrecen una amplia variedad de opciones para mostrar un objeto dibujado en el mapa. Para representar un radio circular, declara un conjunto de opciones correspondientes a un círculo, como el color, el grosor del trazo, el radio del círculo y en qué lugar este debe centrarse y, luego, crea una instancia nueva de google.maps.Circle a fin de crear un círculo nuevo:
     function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
  2. Dibuja el círculo cuando se hace clic en un marcador.

    Para dibujar el círculo cuando el usuario hace clic en un marcador, lo único que debes hacer es llamar a la función drawCircle() que escribiste anteriormente en la devolución de llamada del objeto de escucha de clics de addPanToMarker() y pasarle el mapa y la ubicación del marcador.

    Observa que también se agrega una sentencia condicional que llama a circle.setMap(null). Esto elimina del mapa el círculo que se renderizó antes si el usuario hace clic en otro marcador a fin de que no termines con un mapa cubierto de círculos mientras el usuario explora el mapa.

    Tu función addPanToMarker() debería ser similar al código siguiente:
     function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }

¡Listo! Ve a tu navegador y haz clic en uno de los marcadores. Deberías ver que se renderiza un radio circular a su alrededor:

254baef70c3ab4d5.png

11. Felicitaciones

Creaste correctamente tu primera aplicación web usando Google Maps Platform, para lo cual aprendiste a cargar la API de Maps JavaScript y un mapa, a trabajar con los marcadores, a controlar el mapa y hacer dibujos sobre él y viste también cómo agregar interacción del usuario.

Para ver el código completo, consulta el proyecto finalizado en el directorio /solutions.

¿Qué sigue?

En este codelab, viste una base de lo que puedes hacer con la API de Maps JavaScript. Ahora, intenta agregar algunas de estas funciones al mapa:

Si quieres ver más formas de trabajar con Google Maps Platform en la Web, consulta estos vínculos: