Το 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&amp;v=2&amp;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” και μπορεί κανείς να τη βρει εδώ.

Η συνεισφορά της ομάδας του SocialWhale για το wordcampGR event ήταν και η αφορμή για την δημιουργία ενός jquery plugin (thek27) σε συνδυασμό με ένα wordpress plugin (humanworks) το οποίο παρουσιάζει ένα SocialWhale Group σε ένα widget. Για τους registered χρήστες υπάρχει και η δυνατότητα για vote και post στο group.

Αν και έχω ασχοληθεί παρά πολύ με τα plugins του jquery (ui, autocomplete, bt, fancybox, jGrowl, κ.α.) δεν είχα κάνει ποτέ κάποιο δικό μου όποτε ξεκίνησα από την αρχή, με reverse σε υπάρχοντα plugins και search στο google για tutorials και παραδείγματα.

Αφού βρήκα το skeleton για το plugin η συνέχεια ήταν εύκολη υπόθεση, copy/paste από κώδικα socialwhale, εκτός από 2 σημεία που έπρεπε να βρούμε μια έξυπνη λύση. Το πρώτο ήταν το oauth login που έπρεπε να γίνει από το site του socialwhale και στην συνέχεια να γίνεται redirect πίσω, ώστε να εμφανιστεί η φόρμα για το post και το action για το vote. Το δεύτερο ήταν και το ποιο ενδιαφέρον, γιατί ήθελα να βρω μια λύση με iframe για να αποφύγω το cross site scripting που δεν παίζει με ajax post.

Ας τα πάρουμε από την αρχή, το socialwhale είναι έτσι φτιαγμένο που έχει δικό του api (extended πάνω στο twitter), έτσι για να καταλάβουμε αν ένας χρήστης είναι logged on ελέγχουμε το attribute voted από το json result (πχ groups_api/timeline/both/1.json), και αν αυτό είναι null, τότε δεν είναι, διαφορετικά σημαίνει αν έχει κάνει vote το συγκεκριμένο update. Τώρα για το login απλά φτιάξαμε ένα button στο http://socialwhale.com/oauth όπου το φορτώνουμε με iframe, έτσι όλος ο υπόλοιπος κώδικας βρίσκεται στον server, ώστε να μπορούμε να ελέγχουμε όλα τα widget από ένα oauth login, αυτό του socialwhale. Έτσι αν ένας χρήστης είναι login στο socialwhale, τότε είναι ταυτόχρονα login σε όλα τα widgets  ανεξαρτήτου group.

Τώρα όσο αφορά το submit της φόρμας, σκέφτηκα την λογική του iframe, αλλά με δυναμικό τρόπο, ώστε να έχω και τον έλεγχο του onload event. Ποιο συγκεκριμένα να δημιουργείτε στο runtime ένα iframe με src=”about:blank” και να γεμίζει με την φόρμα που στην συνέχεια γίνεται submit στο socialwhale. Μόλις επιστρέψει το post εμφανίζει στο body ένα div που έχει μέσα το json object και γίνεται trigger το load event του iframe. Έτσι στην συνέχεια γίνεται refresh το timeline και εμφανίζονται τα νέα posts.

Όπως και μάθε plugin έτσι και αυτό έχει options για πόσα rows, αν θα έχει auto refresh κτλ.
Παράδείγματα μπορείτε να δείτε στο wordcamp.gr και στο blog.socialwhale.com.

Το plugin είναι κάτω από GPL licence το Copyright ανήκει στο SocialWhale και βρίσκεται στο  google code με την ονομασία jwhale.

Χρησιμοποίησα την jQuery με το plugin της UI για tabs, και ταυτόχρονα το ActiveX του XStandard για WYSIWYG XHTML editor, με αποτέλεσμα να χάνει το περιεχόμενο από τον editor στην αλλαγή των tabs. Το πρόβλημα το έλυσα με ένα patch του ui στη function tabify. Ποιο συγκεκριμένα, το plugin στο init των tabs, έκανε όλα τα panels hide και στην συνέχεια visible το selected. Αυτό που πείραξα εγώ, είναι να κάνει hide όλα εκτός από το selected.

// highlight selected tab
this.$panels.addClass(o.hideClass);

/* PATCHED BY THEK (not select tab invisible) */
var cc=0;
this.$panels.each(function() {
 var $this = $(this);
 if (cc++!=o.selected) $this.addClass(o.hideClass);
});
//this.$panels.addClass(o.hideClass);
//
/* PATCH BY THEK */