O Google oferece suporte grátis a inclusão do Google Maps em qualquer site da internet, através da API Google Maps. Esta ferramenta pode ser feita de duas formas: simples, através da simples inclusão de uma imagem estática em seu site, ou também pelo modo avançado, incluíndo um mapa dinâmico por Javascript, permitindo que o usuário mova o mapa e altere o zoom. Da mesma forma, os dois modos são fáceis de instalar em seu site.
Tópicos deste artigo:
- Identificando suas coordenadas
- Modo simples, inserindo o Google Maps através de uma imagem estática
- Modo avançado, inserindo a API do Google Maps com Javascript
Identificando suas coordenadas
O primeiro passo é ter em mãos a latitude e longitude do local que você deseja exibir em seu site.
Neste exemplo, vamos encontrar as coordenadas do Maracanã. Dessa forma, usaremos a cidade do Rio de Janeiro nesse exemplo.
Primeiramente, acesse o Google Maps em https://maps.google.com . Em seguida, digite o endereço ou o nome do local. Neste exemplo, digitaremos “Maracanã”.
Uma vez tendo localizado o ponto exato, clique com o botão direito do mouse sobre o local. Então, clique em O que há aqui?
Desta forma, o GoogleMaps exibirá o nome da rua aonde você clicou, junto as coordenadas.
Em nosso exemplo, as coordenadas são:
Latitude: -22.912869
Longitude: -43.228963
Modo simples, inserindo o Google Maps através de uma imagem
O modo mais fácil de inserir o Google Maps em seu site, é através de uma simples tag <img>. Esta API simples não requer uma API KEY (Chave da API do Google Maps). É de livre uso, e pode ser implantado em qualquer site.
O código padrão é este. Portanto, basta substituir LAT pela Latitude e LONG pela Longitude.
<img src="http://maps.googleapis.com/maps/api/staticmap?center=LAT, LONG &zoom=11&size=250x250">
Explicando cada parametro:
- center: Latitude, longitude
- zoom: nível do zoom. Quanto maior, mais focado será o mapa.
- size: tamanho em pixels do mapa
Exemplo de código do Google Maps com as coordenadas do Maracanã:
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.912869, -43.228963 &zoom=11&size=250x250">
Como resultado:
Agora, também aumentaremos o valor do parametro zoom para 15, aumentando o zoom. Exemplo:
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.912869, -43.228963 &zoom=15&size=250x250">
Como resultado:
Exemplo adicionando um marcador ao mapa. Adicionaremos um marcador na estação de Metrô, que possui as coordenadas -22.909410, -43.232954 .
Para adicionar um marcador, basta incluir o parametro markers: …&markers=color:COR|LAT, LONG&….
Este parametro deve ser inserido na tag <img>. Contudo, repare que a latitude e longitude do parametro markers é diferente das coordenadas principais do nosso mapa.
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.912869,-43.2289638 &zoom=15&markers=color:red|-22.909410,-43.2329548&size=250x250">
Resultado:
API do Google Maps por Javascript: modo avançado
O Google também permite a inclusão de um mapa dinâmico, aonde se pode dar zoom e fazer movimentos pela região.
Este método requer uma chave de API do Google (ou API KEY Google Maps). Dessa forma, você pode obter instruções sobre como obter uma chave neste link.
Em seguida, com a sua chave da API em mãos, utilize este exemplo de código:
<html>
<head>
<title>Meu mapa exemplo</title>
<style>
#mapa {
height:400px;
width:400px;
}
</style>
</head>
<body>
<div id="mapa"></div>
<script>
function inicializar() {
var coordenadas = {lat: -22.912869, lng: -43.228963};
var mapa = new google.maps.Map(document.getElementById('mapa'), {
zoom: 15,
center: coordenadas
});
var marker = new google.maps.Marker({
position: coordenadas,
map: mapa,
title: 'Meu marcador'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_API_DO_GOOGLE&callback=inicializar">
</script>
</body>
</html> Resultado:
Caso você veja uma mensagem de erro MissingKeyMapError, isto significa que há um problema com a sua chave da API do Google Maps. Nesse caso, confirme se sua chave está correta.
