Obtenha uma chave da API do Google Maps para seu site
A melhor maneira de adicionar um mapa do Google ao seu site é usar a API do Google Maps. E o Google recomenda que você obtenha uma chave de API para usar os mapas.
Você não é obrigado a obter uma chave de API para usar a API do Google Maps v3, mas é muito útil, pois permite monitorar seu uso e pagar por acesso adicional. A API do Google Maps v3 tem uma cota de 1 solicitação por segundo por usuário para um máximo de 25.000 solicitações por dia. Se suas páginas excederem esses limites, você precisará ativar o faturamento para obter mais.
Como obter uma chave da API do Google Maps
- Faça o login no Google usando sua conta do Google.
- Ir para o Developers Console
- Role pela lista e encontre a API do Google Maps v3 e clique no botão "OFF" para ativá-la.
- Leia e concorde com os termos.
- Vá para o console de APIs e selecione "Acesso à API" no menu à esquerda
- Na seção "Simple API Access", clique no botão "Create new Server key …".
- Digite o endereço IP do seu servidor web. Esse é o IP de onde suas solicitações do Google Maps serão provenientes. Se você não souber o seu endereço IP, poderá consultá-lo.
- Copie o texto na linha “API key:” (sem incluir esse título). Esta é a sua chave de API para seus mapas.
Converta seu endereço em coordenadas
Para usar o Google Maps nas suas páginas da web, você precisa ter latitude e longitude para o local. Você pode obtê-los de um GPS ou você pode usar uma ferramenta online como Geocoder.us para lhe dizer.
- Vá para Geocoder.us e digite seu endereço na caixa de pesquisa.
- Copie o primeiro número da latitude (sem uma letra na frente) e cole-o em um arquivo de texto. Você não precisa do indicador de grau (º).
- Copie o primeiro número da longitude (novamente sem uma letra na frente) e cole-o no arquivo de texto.
Sua latitude e longitude serão algo como isto:
40.756076-73.990838
Geocoder.us só funciona para endereços dos EUA, se você precisa obter as coordenadas em outro país, você deve procurar por uma ferramenta semelhante em sua região.
03 de 05Adicionando o mapa à sua página da Web
Primeiro, adicione o script do mapa ao
do seu documento
Abra sua página da Web e adicione o seguinte ao CABEÇA do seu documento.
Altere a parte realçada para os números de latitude e longitude que você anotou na etapa dois.
Em segundo lugar, adicione o elemento do mapa à sua página
Depois de ter todos os elementos de script adicionados ao CABEÇA do seu documento, você precisa posicionar o seu mapa na página. Você faz isso adicionando um DIV elemento com o id = "map-canvas" atributo. Eu recomendo que você também estilize essa div com a largura e a altura que caberão na sua página:
Finalmente, upload e teste
A última coisa a fazer é enviar sua página e testar se o seu mapa é exibido. Aqui está um exemplo de um mapa do Google na página. Observe que, devido à maneira como o About.com CMS funciona, você terá que clicar em um link para exibir o mapa. Este não será o caso na sua página.
Se o seu mapa não aparecer, tente inicializá-lo com um CORPO atributo:
onload = "initialize ()" >
Outras coisas para verificar se o seu mapa não está carregando incluem:
- Procure por erros de digitação no seu JavaScript, incluindo o caso. JavaScript é sensível a maiúsculas e minúsculas.
- Certifique-se de que você tem o
zoomeCentroconjunto de opções. - Certifique-se de que o seu
DIVelemento está na página com o ID correto. - Certifique-se de que o seu
DIVelemento tem uma altura.
Adicione um marcador ao seu mapa
Mas que bom é um mapa da sua localização se não houver um marcador dizendo às pessoas para onde elas deveriam ir?
Para adicionar um marcador vermelho padrão do Google Maps, adicione o seguinte ao seu script abaixo do var map = … linha:
var myLatlng = new google.maps.LatLng ( latitude longitude );var marker = new google.maps.Marker ({position: myLatlng,mapa: mapa,título:" Antiga sede da About.com '});
Altere o texto realçado para a sua latitude e longitude e o título que gostaria de apresentar quando as pessoas passarem por cima do marcador.
Você pode adicionar quantos marcadores quiser à página, basta adicionar novas variáveis com novas coordenadas e títulos, mas se o mapa for muito pequeno para exibir todos os marcadores, eles não serão exibidos, a menos que o leitor diminua o zoom.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({posição: latlng 2 ,mapa: mapa,título:" computador Apple '});
Aqui está um exemplo de um mapa do Google com um marcador. Observe que, devido à maneira como o About.com CMS funciona, você precisa clicar em um link para exibir o mapa. Este não será o caso na sua página.
05 de 05Adicionar um segundo (ou mais) mapa à sua página
Se você consultou o meu exemplo de página do Google Maps, notará que tenho mais de um mapa exibido na página. Isso é muito fácil de fazer. Veja como.
- Obtenha a latitude e a longitude de todos os mapas que você deseja exibir, conforme aprendemos na etapa 2 deste tutorial.
- Insira o primeiro mapa como aprendemos no passo 3 deste tutorial. Se você quiser que o mapa tenha um marcador, adicione o marcador como no passo 4.
- Para o segundo mapa, você precisará adicionar 3 novas linhas ao seu script initialize ():
var latlng2 = new google.maps.LatLng ( segundas coordenadas );var myOptions2 = {zoom: 18, centro: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = novo google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Se você quiser um marcador no novo mapa também, adicione um segundo marcador apontando para as segundas coordenadas e o segundo mapa:
var myMarker2 = new google.maps.Marker ({posição: latlng2 mapa: map2 título: " Seu título de marcador ' }); - Em seguida, adicione o segundo lugar onde você deseja o segundo mapa. E não se esqueça de dar um
id = "map_canvas_2"IDENTIDADE. - Quando sua página for carregada, dois mapas serão exibidos
Aqui está o código de uma página com dois mapas do Google:
