Google Maps: Markers σε ομάδες με τον MarkerClusterer
Το παρών άρθρο είναι ένα guest post απο τον Αλέξη Μπρέσσα. Στο άρθρο προϋποθέτουμε ότι ο αναγνώστης γνωρίζει javascript, και θα βοηθούσε να έχει ασχοληθεί με το Google Maps API στο παρελθόν.
Το Google Maps API έδωσε τη δυνατότητα στους web developers να προσθέτουν χάρτες σε ιστοσελίδες, και να “σημαδεύουν” σημεία με markers.
Έτσι, έχει γίνει standard για πολλές κατηγορίες ιστοσελίδων, όπως μεσητικά, κατάλογοι επιχειρήσεων κ.α. ή για τη σελίδα επικοινωνίας εταιρειών.
Εάν όμως οι καταχωρήσεις μιας ιστοσελίδας αυξηθούν αρκετά, τότε τα πολλά markers μειώνουν τη χρηστικότητα ενός χάρτη, ενώ μπορεί κανείς να φτάσει και σε τραγική
κατάληξη όπως αυτή:
Προς μεγάλη ευκολία όποιου αντιμετωπίσει αυτό το πρόβλημα, έχει αναπτυχθεί ένα εργαλείο το οποίο φαίνεται να μην είναι ευρέως γνωστό: το MarkerClusterer.
To MarkerClusterer λύνει το πρόβλημα με το να φτιάχνει ομάδες από markers, όταν αυτά είναι το ένα πολύ κοντά στο άλλο. Το παραπάνω τραγικό παράδειγμα,
τώρα γίνεται πιο συμμαζεμένο, όμορφο, μέχρι και εντυπωσιακό:
Για να δούμε πώς μπορεί κανείς να χρησιμοποιήσει το MarkerClusterer:
function map_init( mapElement ) {
var greece = new GLatLng( 39.1130, 24.0313 );
var thessaloniki = new GLatLng( 40.5408, 23.0480 );
var gmap = new GMap2( mapElement );
gmap.setUIToDefault();
gmap.setCenter( greece, 7 );
// σε αυτό τον πίνακα θα προσθέσεις τα markers που θέλεις
var markers = [];
// εδώ προσθέτουμε markers σε 20 τυχαία σημεία κοντά στη Θεσσαλονίκη
for ( var i = 0; i < 20; ++i ) {
var latoffset = Math.random() - 0.5;
var lngoffset = Math.random() - 0.5;
var latlng = new GLatLng( thessaloniki.lat() + latoffset, thessaloniki.lng() + lngoffset );
var marker = new GMarker( latlng );
// προσθήκη του marker στον πίνακα
markers.push( marker );
}
// δημιουργία του clusterer και προσθήκη των markers στο χάρτη
var clusterer = new MarkerClusterer( gmap, markers );
}
Αρκεί λοιπόν τώρα κανείς να καλέσει τη συνάρτηση map_init με παράμετρο ένα <div> που θα χρησιμοποιηθεί
για το χάρτη. Συνήθως θα καλείται όταν φορτώσει η ιστοσελίδα. Με jquery, αν το div έχει id=”map_canvas”:
$( document ).ready( function() {
map_init( $( 'map_canvas' )[ 0 ] );
} );
Θα πρέπει επίσης να προσθέσετε το javascript αρχείο του Google Maps (με το απαραίτητο key) και του MarkerClusterer
(και βέβαια το jquery αν χρησιμοποιηθεί αυτό) στον HTML κώδικά σας:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=GOOGLE_MAPS_KEY"></script> <script type="text/javascript" src="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js" />
Μπορείτε επίσης να δείτε τον MarkerClusterer εν δράσει στο business catalogue.
Ο MarkerClusterer είναι μέρος μιας βιβλιοθήκης πολλών εργαλείων για Google Maps που ονομάζεται “GMaps Utility Library” και μπορεί κανείς να τη βρει εδώ.
