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

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 seu banco de dados de mapas. Você deve se registrar no Google como 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. Vou ao Console do Google Cloud Platform e, depois de 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 na chave.

4. Proteja sua chave de API usando Melhores Práticas recomendado pelo Google.

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:

// Inicialize e adicione a função de mapa initMap () {
// A localização do sinalizador var flag = {lat: XXX, lng: YYY};
// O mapa, centralizado na sinalização var map = new google.maps. Mapa (document.getElementById ('map'), {zoom: 4, centro: bandeira});
// O marcador, posicionado na sinalização var marker = new google.maps. Marcador ({posição: bandeira, mapa: mapa}); } 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. Esta técnica mais avançada é suportada por meio da 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.