Posted on by Max Girkens

Googlemaps Marker Clustering

Wer schonmal mehr als 50 Marker auf einer Googlemap unterzubringen hatte wird wissen, wie das auf die Performance gehen kann.

Um das Clustering Thema kommt man also früher oder später nicht herum.

Neben kommerziellen Lösungen (zB. mapToolKit)

gibt es auch, unscheinbar versteckt in den Weiten von GoogleCode, den opensource MarkerClusterer.
Anhand eines definierbaren Rasters werden benachbarte Marker dann zusammengefasst und durch die entsprechende Anzahl ersetzt.

Implementiert ist das Dingen zB. mit folgender Zeile:

var markerCluster = new MarkerClusterer(map, markers);

Auf den Beispielseiten hier und hier bekommt man einen ganz guten Eindruck was das Tool kann.

Auch die anderen mapTools der gmaps-utility-library sollte man sich mal anschauen, wenn man mit googleMaps zu tun hat.

Related posts:

  1. Javascript Loop Benchmark
  2. Googlemap Zoom-Faktor automatisch berechnen
  3. Juitter prettyDate
  4. run JavaScript code in PHP 5.3 with the v8js extension

8 Replies to “Googlemaps Marker Clustering”

  1. Heißt das dann im Klartext, dass die Marker sozusagen nur per Kartenausschnitt geladen werden? Also wie so eine Art Datagrid-Pager, nur in 2D anstatt 1D?

  2. ich weiss garnicht in wie fern der den sichtbaren Bereich berücksichtig.

    Der kümmert sich vor allem um die Darstellung.
    Heisst du fütterst dem ein 400Marker JS array
    (kann ja gut sein, dass die alle im sichtbaren Bereich wären)
    und der malt trotzdem nur 10 Clustermarker auf die Map.

  3. Aye, genau das meinte ich. Klingt sehr interessant, vor allem wenn das Ding auch andere Datenquellen frisst wie bspw. sowas wie ‘n JsonService. Quasi gib’ dem Server die Koordinaten des aktuellen Kartenausschnitts und kriege nur die Marker, die gerade darzustellen sind…

  4. das kann man sich sonst auch selbst zusammenschrauben aus dem “moveend” event

    GEvent.addListener(map, "moveend", function() { doSomething(); });

    ( der auch änderung der zoomstufe einschliesst)
    und “map.bounds”:

    bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
	
getResults( southWest.lat(), northEast.lat(), southWest.lng(), northEast.lng() );

    dann serverseitig nur die Daten für den entsprechenden Auschnitt holen.

  6. der MarkerClusterer ist wirklich ok bis ca. 1000 Punkte. dann lässt die Performance wieder deutlich nach. für alle grösseren sachen hab ich gute erfahrungen mit geocubes .

  7. Hoffe hier ließt noch einer, suche nämlich schon seit Tagen nach einer Lösung.

    Mein Problem ist, dass bei “moveend” die vorherigen Marker vom MarkerClusterer nicht entfernt werden. Es werden die neuen Cluster gebildet und angezeigt, die alten bleiben aber auch da. Ist aber nur bei “moveend” so, bei draggend oder zoomend ist das Problem nicht.

    Weiß einer Rat?

Comments are closed.