Google is committed to advancing racial equity for Black communities. See how.

Adicionar um mapa ao seu site (JavaScript)

Resumo

Neste codelab, você aprenderá tudo que precisa para começar a usar a Plataforma Google Maps na Web. Você verá todos os princípios básicos, desde a configuração até o carregamento da API Maps JavaScript, a exibição do primeiro mapa, como trabalhar com marcadores e clustering de marcadores, como desenhar no mapa e interagir com o usuário.

O que você criará

e52623cb8578d625.png

Neste codelab, você criará um app da Web simples capaz de fazer o seguinte:

  • Carregar a API Maps JavaScript
  • Exibir um mapa centralizado em Sydney, Austrália
  • Exibir marcadores personalizados para as atrações mais procuradas em Sydney
  • Implementar o clustering de marcadores
  • Permitir a interação com o usuário que atualiza e cria um círculo no mapa ao clicar em um marcador

O que você aprenderá

  • Primeiros passos com a Plataforma Google Maps
  • Como carregar dinamicamente a API Maps JavaScript pelo código JavaScript
  • Carregar um mapa
  • Como usar marcadores, clustering de marcadores e marcadores personalizados
  • Trabalhar com o sistema de eventos da API Maps JavaScript para oferecer interação com o usuário
  • Como controlar o mapa dinamicamente
  • Como desenhar no mapa

Pré-requisitos

Você precisa se familiarizar com os itens abaixo para concluir este codelab. Caso você já tenha trabalhado com a Plataforma Google Maps, avance para o codelab.

Produtos obrigatórios da Plataforma Google Maps

Neste codelab, você usará os seguintes produtos da Plataforma Google Maps:

Outros requisitos para o codelab

Para concluir este codelab, você precisará das seguintes contas, serviços e ferramentas:

  • Uma conta do Google Cloud Platform com o faturamento ativado
  • Uma chave de API da Plataforma Google Maps com a API Maps JavaScript ativada
  • Conhecimento básico de JavaScript, HTML e CSS
  • Node.js (em inglês) instalado no seu computador
  • Um editor de texto ou IDE da sua escolha

Primeiros passos com a Plataforma Google Maps

Se você nunca usou a Plataforma Google Maps, siga o guia "Primeiros passos com a Plataforma Google Maps" ou assista à playlist "Primeiros passos na Plataforma Google Maps" para concluir as seguintes etapas:

  1. Criar uma conta de faturamento.
  2. Criar um projeto.
  3. Ativar as APIs e os SDKs da Plataforma Google Maps.
  4. Gerar uma chave de API.

Configurar a Plataforma Google Maps

Caso você ainda não tenha uma conta do Google Cloud Platform e um projeto com faturamento ativado, veja como criá-los no guia Primeiros passos com a Plataforma Google Maps.

  1. No Console do Cloud, clique no menu suspenso do projeto e selecione qual você gostaria de usar neste codelab.

  1. Ative as APIs e os SDKs da Plataforma Google Maps necessários para este codelab no Google Cloud Marketplace. Para fazer isso, siga as etapas descritas neste vídeo ou nesta documentação.
  2. Gere uma chave de API na página Credenciais do Console do Cloud. Siga as etapas indicadas neste vídeo ou nesta documentação. Todas as solicitações feitas à Plataforma Google Maps exigem uma chave de API.

Configuração do Node.js

Caso ainda não tenha o ambiente de execução do Node.js no seu computador, acesse https://nodejs.org/ (em inglês), faça o download e instale-o.

O Node.js vem com o gerenciador de pacotes npm, que é necessário para instalar as dependências deste codelab.

Configuração do modelo inicial do projeto

Antes de iniciar este codelab, siga as instruções abaixo para fazer o download do modelo inicial do projeto e do código completo da solução:

  1. Faça o download ou crie uma bifurcação do repositório GitHub deste codelab em https://github.com/googlecodelabs/maps-platform-101-js (em inglês).

O projeto inicial está localizado no diretório /starter e inclui a estrutura de arquivos básica necessária para concluir o codelab. Tudo o que você precisa para trabalhar está no diretório /starter/src. 2. Depois de fazer o download do projeto inicial, execute npm install no diretório /starter. Isso instala todas as dependências necessárias listadas em package.json. 3. Depois de instalar as dependências, execute npm start no diretório.

O projeto inicial foi configurado para que você possa usar o webpack-dev-server, que compila e executa o código escrito localmente. O webpack-dev-server também recarrega automaticamente o app no navegador sempre que você fizer alterações no código.

Se você quiser ver o código completo da solução em execução, conclua as etapas de configuração acima no diretório /solution.

Antes de começar, siga as etapas em "Configuração". Terminou? Agora é hora de criar seu primeiro app da Web usando a Plataforma Google Maps.

A base de uso da Plataforma Google Maps na Web é a API Maps JavaScript. Essa API disponibiliza uma interface JavaScript para usar todos os recursos da Plataforma Google Maps, incluindo mapa, marcadores, ferramentas de desenho e outros serviços da Plataforma Google Maps, como o Places.

Comece carregando a API Maps JavaScript.

Se você tem experiência anterior com a API Maps JavaScript, já deve conhecer o carregamento com a inserção da tag script em um arquivo HTML como este:

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

Essa ainda é uma maneira perfeitamente aceitável de carregar a API, mas em dependências JavaScript modernas, ela costuma ser incluída dinamicamente com base no código. Para conseguir o equivalente à tag script acima do código, faça o seguinte:

  1. Abra a /src/app.js. Nela, você fará todo o trabalho deste codelab.
  2. Crie uma função loadMapsJSAPI() e declare as variáveis da sua chave de API da Plataforma Google Maps e o URI para carregar a API Maps JavaScript.

É necessário substituir YOUR API KEY no código de exemplo abaixo pela sua chave de API.

function loadMapsJSAPI() {
  const googleMapsAPIKey = 'YOUR API KEY';
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
}
  1. Crie um stub para o callback runApp.

Na variável googleMapsAPIURI, existe um parâmetro callback=runApp. Ele declara o nome de uma função que queremos que seja executada automaticamente quando a API Maps JavaScript for totalmente carregada. Por enquanto, crie um stub com a instrução console.log:

function runApp() {
  console.log('Maps JS API loaded');
}
  1. Crie a tag script.

Em seguida, crie dinamicamente a tag script com os parâmetros adequados.

Para fazer isso, adicione o snippet de código abaixo a loadMapsJSAPI(). Isso insere uma tag script no DOM e carrega a API Maps JavaScript de maneira assíncrona, como se você a tivesse fixado no código diretamente em index.html.

const script = document.createElement('script');
script.src = googleMapsAPIURI;
script.defer = true;
script.async = true;
  1. Anexe a função de callback a window.

Como você está carregando a API Maps JavaScript de forma dinâmica, em vez de fazer isso inline em um arquivo HTML usando a tag script, é necessário adicionar o callback diretamente ao objeto window do DOM para torná-lo acessível pela API Maps JavaScript. Para fazer isso, adicione o seguinte à loadMapsJSAPI():

  window.runApp = runApp;
  1. Anexe a tag script a head.. Agora, basta anexar a tag script a document.head para carregar a API Maps JavaScript quando a página da Web é carregada.
document.head.appendChild(script);
  1. Carregue a API Maps JavaScript.

Para executar o carregamento da API Maps JavaScript, chame loadMapsJSAPI() na parte superior de app.js:

loadMapsJSAPI();

Se tudo der certo, você verá a instrução console.log do callback runApp() no console do navegador:

4fa88d1618cc7fd.png

Recapitulando, você carregou dinamicamente a API Maps JavaScript do código e definiu a função de callback que é executada assim que API termina de ser carregada.

O arquivo app.js deverá ter esta aparência:

loadMapsJSAPI();
function runApp() {
  console.log('Maps JS API loaded');
}

function loadMapsJSAPI(googleMapsAPIKey) {
  const googleMapsAPIKey = 'YOUR API KEY';
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;

  const script = document.createElement('script');
  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;

  document.head.appendChild(script);
}

Agora que a API Maps JavaScript está carregada, você vai carregar o mapa na próxima etapa.

Hora de exibir seu primeiro mapa.

A parte mais usada da API Maps JavaScript é o google.maps.Map, que é a classe que permite criar e manipular instâncias de mapas. Para ver como isso é feito, crie uma nova função chamada displayMap().

  • Defina as configurações do mapa.

A API Maps JavaScript é compatível com várias configurações diferentes do mapa, mas apenas duas são necessárias:

  • center: define a latitude e a longitude para o centro do mapa.
  • zoom: define o nível de zoom inicial do mapa.

Use o código a seguir para centralizar o mapa em Sydney, Austrália, e insira o zoom no nível 14, que é o ideal para mostrar o centro da cidade.

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
}
  • Acesse o div onde o mapa precisa ser injetado no DOM.

Antes de exibir o mapa, você precisará informar à API Maps JavaScript onde ela será exibida na página. Se observar o index.html, você verá que já existe um div como este:

<div id="map"></div>

Para informar à API Maps JavaScript que o mapa precisa ser inserido aqui, use document.getElementById para ver a referência do DOM:

const mapDiv = document.getElementById('map');
  • Crie uma instância de google.maps.Map.

Para solicitar que a API Maps JavaScript crie um novo mapa que possa ser exibido, crie uma instância de google.maps.Map e transmita o mapDiv e o mapOptions.

Você também retorna a instância Map dessa função, para que possa usá-la de novo posteriormente:

  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
  • Exiba o mapa.

Depois de considerar toda a lógica de criação da instância do mapa, falta chamar o displayMap() da função de callback runApp(), para que ele seja chamado quando a API Maps JavaScript for carregada:

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
}

Agora você verá um lindo mapa de Sydney no seu navegador.

fb0cd6bc38532780.png

Recapitulando, nessa etapa você definiu opções de exibição do mapa, criou uma nova instância de mapa e a injetou no DOM.

A função displayMap() deverá ter esta aparência:

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

Em seguida, adicione alguns marcadores ao mapa.

Os desenvolvedores usam a API Maps JavaScript para diversas atividades, mas colocar marcadores no mapa é, sem dúvida, a mais comum. Os marcadores permitem mostrar pontos específicos no mapa e são elementos comuns da IU para lidar com a interação do usuário. Se você já usou o Google Maps, provavelmente conhece o marcador padrão, que tem a seguinte aparência:

590815267846f166.png

Nesta etapa, você usará o google.maps.Marker para inserir marcadores no mapa.

  1. Defina um objeto para os locais do marcador.

Para começar, crie uma nova função addMarkers() e declare um objeto locations que tenha o seguinte conjunto de pontos de latitude/longitude para as principais atrações turísticas em Sydney.

Além disso, é necessário transmitir sua instância do Map para a função. Você usará isso mais tarde ao criar suas instâncias 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 }
  }
}
  1. Crie uma instância de google.maps.Marker para cada marcador que você quer exibir.

Para criar seus marcadores, use o código abaixo para iterar o objeto locations usando um loop for...in, criar um conjunto de opções para como cada marcador será renderizado e, em seguida, criar uma instância de google.maps.Marker para cada local.

Observe a propriedade icon de markerOptions. Lembra do alfinete de mapa padrão que vimos antes? Você sabia que também pode personalizá-lo alfinete com qualquer imagem? É verdade!

A propriedade icon permite informar o caminho de qualquer arquivo de imagem que você queira usar como um marcador personalizado. Se você iniciou este codelab usando nosso modelo de projeto, uma imagem já está incluída em /src/images.

Você precisa armazenar as instâncias dos marcadores em uma matriz e retorná-las pela função para que elas possam ser usadas depois.

  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;
  1. Exiba os marcadores.

A API Maps JavaScript cria e exibe automaticamente um marcador sempre que uma nova instância de google.maps.Marker é criada. Assim, basta você atualizar sua função de callback runApp() para chamar o addMarkers() e enviar para a instância Map:

function runApp() {
  const map = displayMap();
  const markers = addMarkers(map);
}

Agora, você verá os marcadores personalizados no mapa:

1e4a55de15215480.png

Recapitulando, nessa etapa você definiu um conjunto de locais de marcadores e criou uma instância de google.maps.Marker com um ícone de marcador personalizado para cada local.

A função addMarkers() deverá ter esta aparência:

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

Na próxima etapa, você aprenderá como melhorar a experiência do usuário com os marcadores usando o clustering de marcadores.

Ao usar muitos marcadores próximos entre em si ou em grandes quantidades, eles podem ficar sobrepostos ou muito perto uns dos outros, o que causa uma experiência negativa para o usuário. Por exemplo, depois de criar os marcadores na última etapa, isto pode ter acontecido:

6e39736160c6bce4.png

É aí que o clustering de marcadores entra em ação. Esse é outro recurso bastante usado, que agrupa marcadores próximos em um único ícone que muda dependendo do nível de zoom, desta maneira:

4f372caab95d7499.png

O algoritmo para clustering de marcadores divide a área visível do mapa em uma grade e agrupa os ícones que estão na mesma célula. Felizmente, você não precisa se preocupar com isso, já que a equipe da Plataforma Google Maps criou uma biblioteca muito útil de utilitários de código aberto chamada MarkerClustererPlus que faz tudo automaticamente. Você pode consultar a origem do MarkerClustererPluson no GitHub (em inglês).

  1. Importe o MarkerCluster.

Para o projeto de modelo deste codelab, a biblioteca de utilitários do MarkerClustererPlus já está incluída nas dependências declaradas no arquivo package.json. Por isso, você já a instalou quando executou npm install no início do codelab.

Para importar a biblioteca, adicione o seguinte à parte superior do seu arquivo app.js:

import MarkerClusterer from '@google/markerclustererplus';
  1. Crie uma nova instância do MarkerClusterer.

Para criar clusters de marcadores, você precisa fazer duas coisas: indicar os ícones que gostaria de usar nos clusters de marcadores e criar uma nova instância de MarkerClusterer.

Primeiro, declare um objeto que especifique o caminho dos ícones que você quer usar. No projeto do modelo, já existe um conjunto de imagens salvas em ./img/m. Os nomes dos arquivos de imagem são numerados sequencialmente com o mesmo prefixo: m1.png, m2.png, m3.png e assim por diante.

Ao definir a propriedade imagePath nas opções do agrupador de marcadores, basta informar o caminho e o prefixo do arquivo, e o agrupador vai usar automaticamente todos os arquivos com esse prefixo e anexar um número ao final.

Em seguida, crie uma nova instância de MarkerClusterer e depois indique a instância de Map onde você quer que os clusters de marcadores sejam exibidos e a matriz de instâncias Marker que você quer agrupar.

function clusterMarkers(map, markers) {
  const clustererOptions = { imagePath: './img/m' }
  const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
}
  1. Exiba os clusters de marcadores.

Chame clusterMarkers() da função de callback runApp(). Os clusters de marcadores são adicionados automaticamente ao mapa quando a instância MarkerClusterer é criada na chamada de função.

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
  const markers = addMarkers(map);
  clusterMarkers(map, markers);
}

Agora você verá alguns clusters de marcadores no mapa.

e52623cb8578d625.png

Se você aumentar ou diminuir o zoom, o MarkerClustererPlus vai numerar e redimensionar os clusters automaticamente. Também é possível clicar no ícone de qualquer cluster para aumentar o zoom e ver todos os marcadores incluídos nele.

d572fa11aca13eeb.png

Recapitulando, nessa etapa você importou a biblioteca de utilitários de código aberto do MarkerClustererPlus e a usou para criar uma instância de MarkerClusterer que agrupou automaticamente os marcadores criados na etapa anterior.

A função clusterMarkers() deverá ter esta aparência:

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

A seguir, você aprenderá como lidar com a interação do usuário.

Agora você tem um belo mapa que mostra alguns dos destinos turísticos mais famosos de Sydney. Nesta etapa, você vai incluir algumas respostas a interações dos usuários usando o sistema de eventos da API Maps JavaScript para melhorar ainda mais a experiência do usuário no seu mapa.

A API Maps JavaScript oferece um sistema de eventos abrangente que usa manipuladores de eventos JavaScript para permitir lidar com várias interações do usuário no código. Por exemplo, você pode criar listener de eventos para acionar a execução de código quando houver interações do usuário, como clicar no mapa e nos marcadores, movimentar a visualização do mapa, aumentar e diminuir o zoom e muito mais.

Nesta etapa, você vai adicionar um listener de clique nos seus marcadores e fará com que o mapa se movimente de forma programática para centralizar o marcador em que o usuário clicou.

  1. Defina um listener de clique nos seus marcadores.

Todos os objetos na API Maps JavaScript compatíveis com o sistema de eventos implementam um conjunto padrão de funções para lidar com a interação do usuário, como addListener, removeListener e muito mais.

Para adicionar um listener de evento de clique a cada marcador, itere a matriz markers e chame addListener na instância do marcador para anexar um listener ao evento click:

function addPanToMarker(map, markers) {
  markers.map(marker => {
    marker.addListener('click', event => {

    });
  });
}
  1. Inclua movimento até um marcador quando o usuário clicar nele.

O evento click é acionado sempre que um usuário clica ou toca em um marcador e retorna um evento como um objeto JSON com informações sobre o elemento da IU que recebeu o clique. Para melhorar a experiência do usuário no mapa, você pode manipular o evento click e usar o respectivo objeto LatLng para ver a latitude e a longitude do marcador que recebeu o clique.

Depois de fazer isso, basta enviar isso à função panTo() integrada da instância Map para que o mapa se mova suavemente e centralize o marcador clicado, adicionando o seguinte na função de callback do manipulador de eventos:

const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
map.panTo(location);
  1. Atribua os listeners de clique.

Chame addPanToMarker() de runApp() e envie seu mapa e marcadores para executar o código e atribuir os listeners de clique.

function runApp() {
  console.log('Maps JS API loaded');
  const map = displayMap();
  const markers = addMarkers(map);
  clusterMarkers(map, markers);
  addPanToMarker(map, markers);
}

Acesse o navegador e clique nos seus marcadores. Você verá o mapa se deslocar automaticamente para recentralizar ao clicar em um marcador.

Recapitulando, nessa etapa você usou o sistema de eventos da API Maps JavaScript para atribuir um listener de clique a todos os marcadores no mapa, recuperar a latitude e a longitude do marcador do evento de clique disparado e usar isso para recentralizar o mapa sempre que um marcador receber um clique.

A função addPanToMarker() deverá ter esta aparência:

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

Falta apenas uma etapa. Agora, você vai melhorar ainda mais a experiência do usuário do mapa usando os recursos de desenho da API Maps JavaScript.

Até agora, você criou um mapa de Sydney que mostra marcadores dos destinos turísticos mais famosos e lida com interação do usuário. Na última etapa deste codelab, você usará os recursos de desenho da API Maps JavaScript para adicionar outros recursos úteis à experiência com o mapa.

Imagine que esse mapa será acessado pelos usuários que gostariam de explorar a cidade de Sydney. Um elemento útil seria visualizar um raio em torno de um marcador após clicar nele. Com isso, o usuário pode entender facilmente quais outros destinos estão a uma curta distância a pé do marcador selecionado.

A API Maps JavaScript inclui um conjunto de funções para desenhar formas no mapa, como quadrados, polígonos, linhas e círculos. Em seguida, você vai renderizar um círculo para mostrar um raio de 800 metros ao redor de um marcador após ele receber um clique.

  1. Desenhe um círculo com google.maps.Circle.

As funções de desenho da API Maps JavaScript oferecem diversas opções para como um objeto desenhado aparece no mapa. Para renderizar um raio circular, informe um conjunto de opções para um círculo, como cor, peso do traço, onde ele deve ser centralizado e o raio. Depois, crie uma nova instância de google.maps.Circle para criar um novo círculo:

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;
}
  1. Desenhe o círculo quando o marcador for selecionado.

Para desenhar o círculo quando o usuário clicar em um marcador, basta chamar a função drawCircle() que você escreveu acima no callback do listener de clique em addPanToMarker() e enviar o mapa e o local do marcador.

Uma instrução condicional também é adicionada, e ela chama circle.setMap(null). Ela remove o círculo renderizado anteriormente do mapa se o usuário clicar em outro marcador para que você não tenha um mapa cheio de círculos enquanto o usuário o explora.

A função addPanToMarker() deverá ter esta aparência:

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

Pronto! Acesse seu navegador e clique em um dos marcadores. Você verá um raio circular renderizado ao redor dele:

254baef70c3ab4d5.png

Você criou seu primeiro app da Web usando a Plataforma Google Maps e viu como carregar a API Maps JavaScript, carregar um mapa, trabalhar com marcadores, controlar e desenhar no mapa e incluir interação do usuário.

Para ver o código concluído, confira o projeto finalizado no diretório /solutions.

Qual é a próxima etapa?

Neste codelab, você viu as noções básicas do que é possível fazer com a API Maps JavaScript. Agora, tente incluir alguns destes recursos no mapa:

Para continuar estudando maneiras de usar a Plataforma Google Maps na Web, confira estes links: