API Google Maps: Como incluir um mapa do Google Maps em seu site

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:

15% OFF

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ã”.

inserir google maps no site 1

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?

Ainda não tem um www

inserir google maps no site 2

Desta forma, o GoogleMaps exibirá o nome da rua aonde você clicou, junto as coordenadas.

inserir google maps no site 3

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.

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ã:

Como resultado:

como-incluir-um-mapa-do-google-maps-03

Agora, também aumentaremos o valor do parametro zoom para 15, aumentando o zoom. Exemplo:

Como resultado:

como-incluir-um-mapa-do-google-maps-01

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.

Resultado:

como-incluir-um-mapa-do-google-maps-02

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:

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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat