Prompt Detail:
Integrar um mapa do Google Maps em seu site é um processo relativamente simples e pode ser feito usando a API do Google Maps. Aqui estão os passos básicos para fazer isso:
Passo 1: Obtenha uma Chave da API do Google Maps:
Para começar, você precisa obter uma chave da API do Google Maps. Siga estas etapas:
- Acesse a Página da Plataforma do Google Cloud.
- Faça login com sua conta do Google.
- Clique no botão "Selecionar um Projeto" e crie um novo projeto ou selecione um projeto existente.
- No Console do Google Cloud, vá até a seção "APIs e Serviços" e clique em "Credenciais".
- Clique em "Criar credenciais" e escolha "Chave de API".
- Siga as instruções para criar a chave da API.
Passo 2: Ative a API do Google Maps:
- Ainda no Console do Google Cloud, vá até a seção "APIs e Serviços" e clique em "Biblioteca".
- Pesquise "Google Maps JavaScript API" e clique nela.
- Clique no botão "Ativar" para ativar a API em seu projeto.
Passo 3: Adicione o Código ao Seu Site:
Agora, você pode adicionar o código do mapa ao seu site:
html<!DOCTYPE html>
<html>
<head>
<title>Meu Mapa do Google</title>
<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_DA_API"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
function initMap() {
var myLatLng = { lat: -23.5505, lng: -46.6333 }; // Coordenadas do seu local
var map = new google.maps.Map(document.getElementById("map"), {
center: myLatLng,
zoom: 15, // Nível de zoom
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Seu Marcador Aqui", // Título do marcador
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_DA_API&callback=initMap"></script>
</body>
</html>
Substitua SUA_CHAVE_DA_API pela chave da API que você gerou no Passo 1 e ajuste as coordenadas (lat e lng) para o local que deseja exibir no mapa.
Passo 4: Personalize o Mapa:
Você pode personalizar o mapa adicionando marcadores, polígonos, informações adicionais e muito mais. Consulte a documentação da API do Google Maps para obter detalhes sobre todas as opções disponíveis.
Depois de seguir esses passos, você deve ter um mapa funcional do Google Maps integrado ao seu site. Certifique-se de respeitar os termos de uso e as políticas de cobrança da API do Google Maps, especialmente se seu site tiver um grande número de acessos.
Add to Chrome - It's free
Add to Firefox - It's free
Add to Edge - It's free