Skip to content

Como adicionar um mapa do Google a uma página da web com API

11 de abril de 2021

O que saber

  • Acesse o console do Google Cloud Platform e crie ou selecione um projeto e clique em Prosseguir. No Credenciais página, pegue um Chave API.
  • Insira o código JavaScript (mostrado abaixo) na seção BODY do documento HTML.
  • No cabeçalho do documento HTML, especifique as restrições CSS para o mapa, incluindo tamanho, cores e posicionamento da página.

Este artigo explica como inserir um mapa do Google com um marcador de local em sua página da web. Esse processo inclui obter uma chave de software especial do Google e, em seguida, adicionar o JavaScript relevante à página.

Obtenha uma chave de API do Google Maps

Para proteger seus servidores de serem bombardeados por solicitações de mapas e pesquisas de localização, o Google restringe o acesso ao banco de dados do Google Maps. Você deve se registrar no Google como um desenvolvedor para obter uma chave exclusiva para usar a Interface de Programação de Aplicativos para solicitar dados dos servidores do Maps. A chave API é gratuita, a menos que você precise de acesso pesado aos servidores do Google (por exemplo, para desenvolver um aplicativo da web). Para registrar sua chave de API:

  1. Vá para o console do Google Cloud Platform e, após fazer login com sua conta do Google, crie um novo projeto ou selecione um existente.

  2. Clique Prosseguir para habilitar a API e quaisquer serviços relacionados.

  3. No Credenciais página, pegue um Chave API. Conforme necessário, defina restrições relevantes para a chave.

  4. Proteja sua chave de API usando as práticas recomendadas pelo Google.

Se você acredita que precisará exibir o mapa com mais frequência do que sua cota gratuita permite, estabeleça um acordo de faturamento com o Google. A maioria dos sites, especialmente blogs de baixo tráfego ou sites de nicho, provavelmente não consumirá grande parte da alocação de cota.

Insira o JavaScript em sua página da web

Insira o seguinte código em sua página da Web, na seção BODY do documento HTML: // Initialize and add the map function initMap () {
// A localização do sinalizador var flag = {lat: XXX, lng: YYY};
// O mapa, centralizado no sinalizador var map = new google.maps.Map (document.getElementById (‘map’), {zoom: 4, center: flag});
// O marcador, posicionado na bandeira var marker = new google.maps.Marker ({position: flag, map: map}); } src = “https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”> Neste código, altere o seguinte:

  • Substituir bandeira com um nome que faz referência ao local que você está fixando. Mantenha-o simples e curto (como casa ou escritório ou Paris ou detroit) Você pode executar este código saindo bandeira no estado em que se encontra, mas a alteração do nome permite a reutilização desse código na mesma página, para incorporar vários mapas diferentes.
  • Substituir Xxx e AAA com a latitude e longitude, em decimais, da localização do marcador do mapa. Você deve substituir esses valores para que o mapa seja exibido corretamente. Uma maneira fácil de encontrar a latitude e longitude é abrir o Google Maps e clicar com o botão direito no local preciso que você pretende sinalizar. No menu de contexto, selecione O que está aqui? para ver a latitude e longitude.
  • Substituir YOUR_API_KEY com a chave API que você obteve do Google. Não coloque espaços entre o sinal de igual e o e comercial. Sem a chave, a consulta falhará e o mapa não será exibido corretamente.

Práticas Ótimas

No cabeçalho do seu documento HTML, especifique as restrições CSS para o mapa, incluindo tamanho, cores e posicionamento da página. O script de mapa do Google contém atributos como ampliação e Centro que estão abertos à modificação do usuário final. Essa técnica mais avançada é apoiada pela documentação do desenvolvedor do Google. Uma API do Google Maps é um ativo valioso. As instruções de práticas recomendadas do Google oferecem conselhos excelentes para proteger a chave contra o uso indevido por terceiros. A segurança adequada é especialmente relevante se você configurou um sistema de pagamento para acesso à API, já que pode enfrentar uma conta alta se suas credenciais forem roubadas. Em particular, o exemplo que mostramos aqui faz incorpore a chave de API diretamente no código – fizemos isso com o objetivo de demonstrar o procedimento. Em um ambiente de produção, no entanto, é melhor especificar variáveis ​​de ambiente para a chave em vez de inserir a chave diretamente.