Adicionar um mapa do Google com marcadores usando HTML

Introdução

Neste tutorial, mostramos como adicionar um mapa do Google com um marcador a uma página da Web usando elementos HTML personalizados. Este é o mapa que você vai criar usando este tutorial. Dois marcadores são posicionados: um em Mountain View, CA, e outro em Seattle, WA.

Vamos começar

Estas são as etapas para criar um mapa do Google com um marcador usando HTML:

  1. Gerar uma chave de API
  2. Criar HTML, CSS e JS
  3. Adicionar um mapa
  4. Adicionar um marcador

Você vai precisar de um navegador da Web. Escolha uma opção conhecida na lista de navegadores compatíveis, como Google Chrome (recomendado), Firefox, Safari ou Edge, dependendo da sua plataforma.

Etapa 1: gerar uma chave de API

Nesta seção, explicamos como autenticar o app na API Maps JavaScript usando sua própria chave de API.

Siga estas etapas para gerar uma chave:

  1. Acesse o console do Google Cloud.

  2. Crie ou selecione um projeto.

  3. Clique em Continuar para ativar a API e os serviços relacionados.

  4. Na página Credenciais, gere uma chave de API e defina as restrições dela. Observação: você vai poder usar uma chave irrestrita ou com restrições a navegadores, se tiver uma.

  5. Para evitar roubo de cota e proteger sua chave, consulte Usar chaves de API.

  6. Ative o faturamento. Consulte Utilização e faturamento para mais informações.

  7. Agora você já pode usar sua chave de API.

Etapa 2: criar HTML, CSS e JS

Este é o código de uma página HTML básica da Web:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Para carregar um mapa, adicione uma tag script que contenha o carregador bootstrap da API Maps JavaScript, como mostrado no snippet a seguir (inclua sua própria chave de API):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

Alerta de spoiler: teste o exemplo pronto em JSFiddle.

Etapa 3: adicionar um mapa

Para incluir o mapa do Google na página, copie o elemento HTML gmp-map e cole no body da página HTML:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Este é o mapa resultante:

No centro do mapa criado está a área metropolitana de San Jose.

Etapa 4: adicionar um marcador

Para isso, use o elemento HTML gmp-advanced-marker. Copie o snippet a seguir e cole em todo o gmp-map que você adicionou na etapa anterior.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

O código precedente adiciona dois marcadores e muda os parâmetros zoom e center no gmp-map para que esses marcadores apareçam melhor. É obrigatório ter um ID do mapa para usar Marcadores Avançados (DEMO_MAP_ID pode ser usado).

Dicas e solução de problemas

  • É possível adaptar o mapa com estilo personalizado.
  • Use o console de Ferramentas para desenvolvedores no navegador da Web para testar e executar o código, ler relatórios de erros e resolver problemas.
  • Use estes atalhos do teclado para abrir o console no Chrome:
    Command + Option + J (no Mac) ou Control + Shift + J (no Windows).

  • Siga as etapas abaixo para gerar as coordenadas de latitude e longitude de um local no Google Maps.

    1. Abra o Google Maps em um navegador.
    2. Clique com o botão direito do mouse no local exato das coordenadas no mapa.
    3. Selecione O que há aqui? no menu de contexto que aparece. O mapa mostra um card na parte de baixo da tela. Veja as coordenadas de latitude e longitude na última linha dele.

  • Use o serviço de geocodificação para converter um endereço em coordenadas de latitude e longitude. Os guias para desenvolvedores apresentam informações detalhadas sobre como começar a usar o serviço de geocodificação.

Exemplo do código completo

Confira o mapa final e o exemplo de código completo usado neste tutorial.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html