Adicionar um mapa do Google com um marcador ao seu site

Introdução

Neste tutorial, mostramos como adicionar um mapa do Google simples com um marcador a uma página da Web. Ele foi desenvolvido para pessoas com conhecimento básico ou intermediário de HTML e CSS e que sabem um pouco de JavaScript. Se quiser consultar um guia avançado sobre a criação de mapas, leia o Guia para desenvolvedores.

Ao longo deste tutorial, você vai criar o mapa abaixo. O marcador está posicionado em Uluru (também conhecido como Ayers Rock), no Parque Nacional Uluru-Kata Tjuta.


TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

Testar exemplo de código

Como começar

Estas são as 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 uma opção conhecida na lista de navegadores compatíveis, como Google Chrome (recomendado), Firefox, Safari ou Edge, dependendo da sua plataforma.

Etapa 1: criar uma página HTML

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

<!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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>

index.html

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

Sobre 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 cabeçalho de três níveis acima do mapa usando o código abaixo.

<h3>My Google Maps Demo</h3>

Ele define uma área da página para seu mapa do Google.

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

Neste estágio 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 de div.

/* 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 */
}

Acima, o elemento style configura o tamanho de div. Para que o mapa fique visível, a largura e a altura de div têm que ser maiores do que zero. Neste caso, div é configurado com uma altura de 400 pixels e uma largura de 100%, que ocupa toda a página da Web.

O carregador de inicialização prepara a API Maps JavaScript para o carregamento (nenhuma biblioteca é carregada até que importLibrary() seja chamado).

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

Consulte a Etapa 3: gerar uma chave de API para saber como ter sua própria chave de API.

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 escrever seu próprio JavaScript que usa a API para adicionar um mapa com um marcador.

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

No código acima, as bibliotecas Map e AdvancedMarkerView são carregadas quando a função initMap() é chamada.

Sobre o código

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

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

Acima, new Map() cria um novo objeto no mapa do Google. 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. Zero é o nível mais baixo e mostra toda a Terra. Defina o valor mais alto para aumentar o zoom em resoluções mais altas.

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

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerView({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerView({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Saiba mais sobre marcadores:

Etapa 3: 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. Copie todo o código desta página do tutorial para o editor de textos.

  8. Substitua o valor do parâmetro key no URL pela sua própria chave de API (que você acabou de copiar).

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

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

  10. Carregue o arquivo HTML, arrastando da área de trabalho para o navegador. Na maioria dos sistemas operacionais, você também pode clicar duas vezes no arquivo.

Dicas e solução de problemas

  • É possível modificar as opções, como estilo e propriedades, para personalizar o mapa. Para mais informações sobre como personalizar mapas, leia os guias sobre estilizar e desenhar no mapa.
  • 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.