Como adicionar um mapa do Google com um marcador ao seu site

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Introdução

Neste tutorial, mostramos como adicionar um mapa do Google simples com um marcador a uma página da Web. É adequado para pessoas com conhecimento básico ou intermediário de HTML e CSS e um pouco de JavaScript. Para ver um guia avançado sobre como criar mapas, leia o guia do desenvolvedor.

Veja abaixo o mapa que você criará usando este tutorial. O marcador está posicionado em Uluru (também conhecido como Ayers Rock) no Parque Nacional de Uluru-Kata Tjuta.

A seção abaixo exibe todo o código necessário para criar o mapa neste tutorial.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Testar amostra

Primeiros passos

Há três etapas para criar um mapa do Google com um marcador na sua página da Web:

  1. Criar uma página HTML
  2. Adicionar um mapa com um marcador
  3. Gerar uma chave de API

Você vai precisar de um navegador da Web. Escolha um conhecido como Google Chrome (recomendado), Firefox, Safari ou Edge, com base na sua plataforma da lista de navegadores compatíveis.

Etapa 1: criar uma página HTML

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Ela é uma página muito básica com um nível de cabeçalho três (h3) e um único elemento div. Você pode adicionar o conteúdo que quiser à página da Web.

Como entender o código

O código abaixo cria uma página HTML que consiste em um cabeçalho e um corpo.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Você pode adicionar um nível de título três acima do mapa usando o código abaixo.

<h3>My Google Maps Demo</h3>

O código abaixo define uma área da página para seu mapa do Google Maps.

<!--The div element for the map -->
<div id="map"></div>

Nesta etapa do tutorial, div aparece como um bloco cinza, porque você ainda não adicionou um mapa. O código abaixo descreve o CSS que define o tamanho e a cor da div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

No código acima, o elemento style define o tamanho div do mapa. Defina a largura e a altura como div como maior que 0 px para que o mapa fique visível. Nesse caso, a div está definida com uma altura de 400 pixels e uma largura de 100% para exibir a largura da sua página da Web.

Etapa 2: adicionar um mapa com um marcador

Nesta seção, mostramos como carregar a API Maps JavaScript na sua página da Web e como escrever seu próprio JavaScript que usa a API para adicionar um mapa com um marcador.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Testar amostra

Como entender o código

No código abaixo, o script carrega a API usando o URL especificado.

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

No código acima, o parâmetro callback executa a função initMap após o carregamento da API. O atributo async permite que o navegador continue a analisar o restante da página enquanto a API é carregada. Após o carregamento, o navegador será pausado e executará o script imediatamente. O parâmetro key contém sua chave de API.

Consulte a Etapa 3: gerar uma chave de API para ver instruções sobre como conseguir sua própria chave de API mais tarde.

O código abaixo contém a função initMap, que inicializa e adiciona o mapa quando a página da Web é carregada. Use uma tag script para incluir seu próprio JavaScript que contém a função initMap.

  function initMap() {}

Adicione a função document.getElementById() para encontrar o mapa div na página da Web.

O código abaixo cria um novo objeto do Google Maps e adiciona propriedades ao mapa, incluindo o centro e o nível de zoom. Consulte a documentação para outras opções de propriedade.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});

No código acima, new google.maps.Map() cria um novo objeto do Google Maps. A propriedade center informa à API onde centralizar o mapa.

Saiba mais sobre como receber coordenadas de latitude/longitude ou converter um endereço em coordenadas geográficas.

A propriedade zoom especifica o nível de zoom do mapa. Zoom: 0 é o menor zoom e exibe toda a Terra. Defina o valor de zoom mais alto para aumentar o zoom em uma resolução mais alta.

O código abaixo coloca um marcador no mapa. A propriedade position define a posição do marcador.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

Saiba mais sobre marcadores:

Etapa 3: obter uma chave de API

Nesta seção, explicamos como autenticar seu 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, acesse uma chave de API e defina as restrições dela. Observação: se você tiver uma chave de API sem restrições ou uma com restrições do navegador, poderá usá-la.

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

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

  7. Copie o código completo do tutorial desta página para seu editor de texto.

  8. Substitua o valor do parâmetro key no URL pela sua própria chave de API, que é a chave de API que você recebeu.

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

  9. Salve esse arquivo com um nome que termine com .html, como index.html.

  10. Para carregar o arquivo HTML em um navegador da Web, arraste-o da área de trabalho para o navegador. Como alternativa, clicar duas vezes no arquivo funciona na maioria dos sistemas operacionais.

Dicas e solução de problemas

  • Você pode ajustar opções como estilo e propriedades para personalizar o mapa. Para mais informações sobre como personalizar mapas, leia os guias sobre estilo e desenho.
  • Use o Console das ferramentas para desenvolvedores no seu navegador da Web para testar e executar o código, ler relatórios de erros e resolver problemas no código.
  • Use os seguintes 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 ver 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 no mapa onde você precisa de coordenadas.
    3. Selecione O que é aqui no menu de contexto exibido. O mapa exibe um card na parte inferior da tela. Veja as coordenadas de latitude e longitude na última linha do card.
  • Você pode converter um endereço em coordenadas de latitude e longitude usando o serviço Geocoding. Os guias do desenvolvedor fornecem informações detalhadas sobre os primeiros passos com o serviço Geocoding.