marker-cluster

Gruppi di marker in Google Maps: i Cluster Marker

Gruppi di marker in Google Maps: i Cluster Marker

Google Maps

Avere una mappa nella pagina contatti è la norma: aiuta l’utente a trovare il negozio, o la sede dell’azienda, senza doverselo cercare su Google Maps. Tutto va bene fino a quando si parla di un solo negozio o di una sola sede, ma quando si vogliono visualizzare più sedi sulla stessa mappa?

Mi è capitato un problema simile lavorando sulla pagina contatti del sito di Multiconsult. L’azienda ha quattro sedi: due a Bergamo e provincia, una a Sondrio e una a Londra. Tutte e quattro le sedi devono essere visualizzate nella pagina contatti, con lo zoom e il posizionamento di default messi in modo che tutte le sedi siano visibili non appena si accede alla pagina.

Così ho inserito come di consueto i quattro marker sulla mappa e settato i parametri come richiesto. Ma ecco spuntare il vero problema: i tre marker delle sedi lombarde erano sovrapposti e pressoché indistinguibili.

La soluzione è molto semplice: bisogna fare ricorso ai Cluster Marker. Questi particolari marker servono per rappresentare più marker quando lo zoom è talmente lontano da non poterli distinguere (un po’ come la bandierina del Risiko, che rappresenta diversi carri armati!).

Ho definito due livelli di cluster: il primo che racchiude due marker, il secondo tre. Ecco il risultato con lo zoom sull’intera Europa: a Londra viene visualizzato il marker singolo, mentre sulla Lombardia si può notare il Marker Cluster che “racchiude” le tre sedi italiane.

zoom1

Cliccando sul Cluster Marker, lo zoom viene settato in modo automatico per scompattarlo. In questo caso il risultato è un marker singolo su Sondrio e un nuovo Cluster Marker (questa volta di primo livello) su Bergamo.

zoom2

Un click sul secondo Cluster Marker produce un ulteriore zoom o lo scompattamento completo dei marker singoli: ora la posizione della sede principale in centro a Bergamo (in verde) e della sede presso Kilometro Rosso (in bianco) sono distinte e ben riconoscibili.

Puoi trovare maggiori informazioni nella pagina della documentazione di Google riguardo i Cluster Marker.

read more >