Um dos cursos ministrados na WebGoal foi sobre um dos serviços que é o GoogleMaps.
Na minha opinião, um dos mais interessantes e utilizáveis, nem lembro mais do meu velho Guia de Ruas que já está a muito tempo embaixo do banco. Apesar dos serviços do Google parecer simples, nem todas as funcionalidades são utilizadas. Por isso, decidi abordar um dos serviços e mostrar algumas funcionalidades.
No início abordei algumas funcionalidades que achei muito legal, principalmente a que integra o Street View e Como Chegar. A cada ponto que você clica na rota criada o Street View exibe o mesmo ponto. Então, se você vai para um lugar mesmo sem conhecer não há problemas, pois dessa maneira acaba conhecendo o lugar antes de passar por ele.
Outro serviço interessante é o Local Business Center. Bem simples, serve para cadastrar uma empresa e a localização. Se você fizer uma busca no Google Maps (não a busca principal no Google) irá aparecer.
Esses foram as funcionalidades abordadas no curso. Agora vamos passar para a parte técnica de como colocar um mapa no site e incluir os marcadores com o balão como mostrado no quadro.
Antes de tudo, precisamos de uma chave. Essa chave autoriza o carregamento do arquivo Javascript (JS), pois todo o JS carregado relativo ao mapa é acessado direto do Google. Para conseguir uma chave, é necessário ter uma conta no Google, aceitar os termos do Contrato e indicar o domínio do site. Sabendo desses detalhes acesse: Obter chave do Google Maps.
Temos os principais objetos que devemos instanciar para que o mapa seja exibido. Para exibir um mapa devemos criar uma DIV e referencia-la na instâcia do objeto GMap2:
map = new GMap2(document.getElementById(”map”))
<div id=”map”></div>
Dessa maneira criamos um objeto exibir o mapa, mas ainda está faltando dizer em que ponto o mapa será exibido. Para utilizamos o objeto GLatLng que recebe duas strings: latitude e longitude no formato ‘99.99999999…..’ e para adicionar fazemos o seguinte:
map.setCenter(new GLatLng(-23.62459116308587,-46.639323234558105), 15)
Utilizando o código acima centralizamos o mapa. O segundo parâmetro define o nível de zoom que será exibido. O zoom tem uma variação de 1 a 20, onde 1 é o mais distante e 20 é o mais próximo, ressaltando que em regiões menos populadas o nível de zoom máximo é 19.
Temos ainda os objetos GSmallMapControl, GMapTypeControl, GEvent, GMarker.
- GSmallMapControl: Insere o controle pequeno de zoom e direção;
- GMapTypeControl: Insere o controle ‘Mapa’, ‘Satélite’ e ‘Terreno;
- GEvent: Adiciona um evento a um objeto GMap2, GMarker, etc;
- GMarker: Adiciona um ponto no mapa (ícone do balão).
Lembrando da variável que referência o mapa, seguimos adicionando algumas funcionalidades como no primeiro caso que inserimos um controle de zoom e direção:
- map.addControl(new GSmallMapControl());
No próximo inserimos um controle de tipo de mapa
- map.addControl(new GMapTypeControl());
Agora inserimos um popup onde podemos inserir somente um texto ou inserir um formulário. Para todos as ações da interface existe um evento correspondente. Este popup possui um ícone de fechar onde podemos capturar este evento. O primieiro parâmetro é a localização que também pode ser um objeto GLatLng, e o segundo o texto que desejamos inserir.
- map.openInfoWindowHtml(map.getCenter(), ‘Mini-cursos Webgoal’);
O próximo é muito interessante, é o principal objeto para que ocorra a interatividade da aplicação, os enventos. No exemplo inserimos um listener no objeto map para escutar o evento clique, ao clicar a função callback será executada.
- GEvent.addListener(map, “click”, function(overlay, point, overlayPoint) { });
E para adicionar um icone de marcção no mapa através de um clique no mapa inserimos o código abaixo na função callback acima aproveitando o parâmetro point que recebe um objeto GLatLng.
- map.addOverlay(new GMarker(point));
Simplificando, colocamos os códigos acima em uma função e chamamos essa função no onload do documento, assim teremos o mapa carregado.
O Google Maps tem diversos outros objetos que podem requintar seu site deixando muito mais navegável e interativo.