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. Um marcador está posicionado em Ottumwa, Iowa.

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.

Faça o seguinte para obter uma chave de API:

  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 de API 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
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></script>

Como a página HTML precisa ser independente, adicione o código CSS diretamente à página:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Isso cria um mapa centralizado em Ottumwa, Iowa, mas ainda não há um marcador.

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="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

O código anterior adiciona um marcador ao mapa. É obrigatório ter um ID do mapa para usar Marcadores Avançados (DEMO_MAP_ID pode ser usado).

Teste o exemplo pronto no JSFiddle.

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>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>