Seja você desenvolvedor ou não, temos que admitir o poder do Google Maps. É bem difícil encontrar alguém hoje em dia que não tenha acessado pelo menos uma vez o famoso Maps para ver onde ficava um determinado lugar.
Esses dias me deparei novamente com o excelente artigo do Thulio Philipe sobre a API do Google Maps V3 e resolvi escrever um pouco sobre um recurso chamado MarkerClusterer.
Segundo o Google, trata-se de uma solução para o problema de muitos pontos em um mapa. Indo direto ao ponto, ele agrupa pontos (markers) que são muito próximos uns dos outros no mapa e renderiza um ponto diferente com o número de ícones agrupados.
Confuso? Visualmente fica mais fácil para explicar. Imagine que tivéssemos um mapa assim:
Temos alguns pontos que são bem próximos uns dos outros enquanto outros são mais distantes. Aplicando o MarkerClusterer ficaria assim:
Você pode estar pensando a mesma coisa que pensei a primeira vez que vi o exemplo: “Ah, nem precisava agrupar os itens! Tem poucos no mapa!” Pode ser. Agora imagine que tivéssemos um mapa assim:
Pois é! De acordo com o próprio Google, um mapa assim acaba por se tornar lento pelo fato de um ponto no mapa ser uma combinação de vários elementos no DOM. Logo, quanto mais pontos no mapa, maior o trabalho no navegador para renderização. O legal é que existe até um teste de velocidade comparando um mapa com e sem o uso do MarkerClusterer.
Como ficaria com a utilização do MarkerClusterer:
Pode ser até que a questão da perfomance não influencie tanto no seu projeto, mas um ponto que deve ser considerado é a usabilidade e experiência do usuário ao interagir com o mapa. Se colocar no lugar do usuário nessa hora é fundamental. Pra localizar determinado ponto no mapa: fica mais fácil com todos visíveis próximos uns dos outros ou agrupados em grupos maiores? Logicamente não existe um certo ou errado pois isso vai variar de projeto para projeto, mas vale a discussão com os membros do time.
As imagens acima foram tiradas daqui onde também é possível ler mais a respeito desse recurso.
Peguei um exemplo do próprio Google pra podermos visualizar a diferença entre um mapa sem a utilização do MarkerClusterer e com a utilização do recurso.
Dando uma olhada no código do exemplo com a utilização do recurso temos o seguinte:
HTML
CSS
JS
A parte de HTML e CSS é bem tranquila e, se pararmos pra olhar, até a parte do JS é de fácil entendimento.
- Primeiro é criado o objeto do mapa com seus parâmetros e ele é passado à variável
map. - Depois é criado um array vazio que vai armazenar todos os markers.
- Logo após é executado um
forque vai iterar pelo JSON que contém as informações dos pontos e, adicionar cada ponto no array que criamos acima. - Nesse momento é criado o objeto MarkerClusterer passando como parâmetros o array contendo todos os pontos do JSON e o mapa.
- Por fim, o mapa é iniciado no load da página.
É isso pessoal, a idéia era dar uma passada geral sobre o recurso que pode ser útil para alguém que for mexer com mapas que possuem muitos pontos!