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.
A seção abaixo mostra 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 exemplo de código
Começar
Estas são as três etapas para criar um mapa do Google com um marcador na sua página da Web:
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> <!-- 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>
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.
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 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
.
/** * @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 */ }
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.
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 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 exemplo de código
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>
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. Depois do carregamento, o navegador é pausado e executa o script imediatamente. O parâmetro key
contém sua chave de API.
Consulte a Etapa 3: gerar uma chave de API para saber como obter 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 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 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, });
Acima, new google.maps.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 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: 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:
Acesse o console do Google Cloud.
Crie ou selecione um projeto.
Clique em Continuar para ativar a API e os serviços relacionados.
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.
Para evitar roubo de cota e proteger sua chave, consulte Usar chaves de API.
Ative o faturamento. Consulte Utilização e faturamento para mais informações.
Copie todo o código desta página do tutorial para o editor de textos.
Substitua o valor do parâmetro
key
no URL pela sua própria chave de API (que você acabou de copiar).<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Salve o arquivo com um nome que termine com
.html
, comoindex.html
.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.
- Abra o Google Maps em um navegador.
- Clique com o botão direito do mouse no local exato das coordenadas no mapa.
- 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.