[GELÖST] Marker zusammenfassen ( Marker Clustering )

Hallo,
über die Erweiterung habe ich verschiedene Marker erstellt und zur Anzeige gebracht.
Mittlerweile häufen sich diese ( Stadtgebiete ) von daher:

Gibt es eine Möglichkeit über die Erweiterung erstellte Marker ab einer bestimmten Zoomstufe zusammenzufassen/gruppieren?
Für eine Anregung dankbar
Fank

UPDATE:
Hier geht es halt um die Erweiterung [dlh_googlemaps] - Daher nur zur Info:
Ab der Version 1.7.3-beta1 der Erweiterung [cm_membergooglemaps] soll das Clustering Bestandteil sein - siehe:
https://community.contao.org/de/show...mbergooglemaps

Hab das entsprechend google script mal in einer Contao 2er Umgebung eingebaut das funktioniert immer noch..

Zitat:

---

Zitat von magicsepp

Hab das entsprechend google script mal in einer Contao 2er Umgebung eingebaut das funktioniert immer noch..

---

Vielen Dank,
kannst Du dies für mich detaillierter ausführen ...

Frank

Here is das script und ein Beispiel zu finden

http://gmaps-utility-library-dev.goo...rkerclusterer/

Habe es jetzt wie folgt umgesetzt ( Contao 3.x und [dlh_googlemaps]-Version 2.0.9 ):


[dlh_googlemaps] Javascript Funktionsblock:
Wie in "\system\modules\dlh_googlemaps\docs" beschrieben kann man dynamische Inhalte über den folgenden Funktionsblock einfügen:

Code:

---

<script>
// *ID* = Id der gewünschten Googlemap
// *LATLNG* = Koordinatenpaar

function gmap*ID*_dynmap(gmap*ID*) {

var gmap*ID*_1_marker = new google.maps.Marker({
  position: new google.maps.LatLng(*LATLNG*),
  map: gmap*ID*
  });

var gmap*ID*_2_marker = new google.maps.Marker({
  position: new google.maps.LatLng(*LATLNG*),
  map: gmap*ID*
  });

}
</script>

---

Das entsprechende Script kann an bel. Position einer Seite eingebunden werden, da der Aufruf im Template "ce_dlh_googlemaps_default.html5" erfolgt.


Google Maps V3 Utility:
Zur Nutzung des Marker Clustering wird eine der beiden Javascript Libraries "Marker Clusterer o. Marker Clusterer Plus " ( https://code.google.com/p/google-map...wiki/Libraries ) benötigt. Das entsprechende Javascript File muß in die Seite eingebunden werden. Entweder direkt oder z.B. via

Code:

---

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>

---

Über folgenden Zusatz kann dann eine Marker Clustering realisiert werden:

Code:

---

<script>
// *ID* = Id der gewünschten Googlemap
// *LATLNG* = Koordinatenpaar

var arrMarkers = [];

function gmap*ID*_dynmap(gmap*ID*) {

var gmap*ID*_1_marker = new google.maps.Marker({
  position: new google.maps.LatLng(*LATLNG*),
  map: gmap*ID*
  });
  arrMarkers.push(gmap*ID*_1_marker);


var gmap*ID*_2_marker = new google.maps.Marker({
  position: new google.maps.LatLng(*LATLNG*),
  map: gmap*ID*
  });
  arrMarkers.push(gmap*ID*_2_marker);

mc = new MarkerClusterer(gmap*ID*,arrMarkers, {maxZoom: 10,  gridSize:50});

}
</script>

---

Werden die Marker hingegen direkt über das Contao Backend für eine Karte erstellt, müssen die Templates "ce_dlh_googlemaps_default.html5" und "dlh_marker.html5" bearbeitet werden.

Template dlh_marker.html5:

Code:

---

...
  ca. nach Zeile 46:
  arrMarkers.push(gmap<?php echo $this->element['id']; ?>_marker);
...

---

ce_dlh_googlemaps_default.html5:

Code:

---

...
  nach dem öffnenden <script> Tag:
 
  var infoWindowsCount = [];
  ( Ansonten:
    "Uncaught ReferenceError: infoWindowsCount is not defined"
    bei Nutzung der Infoblasen und es geht nicht ... )
 
  var arrMarkers = [];
...

  if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
    gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
  }

  ersetzen durch:

  if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
    gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>, arrMarkers);
  }

...

---

Jetzt benötigt man nur noch den dlh_googlemaps Funktionsblock wie folgt:

Code:

---

<script>
// *ID* = Id der gewünschten Googlemap

function gmap*ID*_dynmap(gmap*ID*, arrMarkers) {

  mc = new MarkerClusterer(gmap*ID*, arrMarkers, {maxZoom: 10,  gridSize:50});

}
</script>

---

Weitere Optionen - z.B. zur Darstellung der Cluster Icons - siehe https://code.google.com/p/google-map...wiki/Libraries

Frank

Hallo Franko,

bin deiner Anleitung gefolgt aber irgendwie klappt es nicht.
Brauche das Clustering für http://hundimfreibad.de/freibaeder.html

Wir legen jeden Punkt in Contao an, also bin ich dem zweiten Teil deiner Anleitung gefolgt.
Als Ergebnis kamen alle Punkte untereinander als Text, ohne Karte.

Kannst du mir evtl. helfen?
Wäre es vermessen zu fragen, ob ich dir einen Zugang geben darf?! ;-)
Vielleicht ist hier auch jemand anderes der das kann?!

Die Seite ist Non-Profit und ich bin über jede Hilfe dankbar.

Gruß Thomas

Zitat:

---

Zitat von Thomas Hinze

Hallo Franko,

bin deiner Anleitung gefolgt aber irgendwie klappt es nicht.
Brauche das Clustering für http://hundimfreibad.de/freibaeder.html

Wir legen jeden Punkt in Contao an, also bin ich dem zweiten Teil deiner Anleitung gefolgt.
Als Ergebnis kamen alle Punkte untereinander als Text, ohne Karte.

Kannst du mir evtl. helfen?
Wäre es vermessen zu fragen, ob ich dir einen Zugang geben darf?! ;-)
Vielleicht ist hier auch jemand anderes der das kann?!

Die Seite ist Non-Profit und ich bin über jede Hilfe dankbar.

Gruß Thomas

---

Hm,
in der Anlage findest Du meine beiden modifizierten Test Templates zur Ansicht - Evtl. hilft das weiter ...
Frank

Anhang 15264

Danke, jetzt wird leider nur einer von 150 Markern angezeigt, aber die Karte ist zu sehen.

Wo muss dieser Code hier rein?

<script>
function gmap2_dynmap(gmap2, arrMarkers) {
mc = new MarkerClusterer(gmap2, arrMarkers, {maxZoom: 10, gridSize:50});
}
</script>

Die ID meiner Map ist 2.

Das Google Map Script lade ich vorher, im header.

Zitat:

---

Zitat von Thomas Hinze

Danke, jetzt wird leider nur einer von 150 Markern angezeigt, aber die Karte ist zu sehen.

Wo muss dieser Code hier rein?

<script>
function gmap2_dynmap(gmap2, arrMarkers) {
mc = new MarkerClusterer(gmap2, arrMarkers, {maxZoom: 10, gridSize:50});
}
</script>

Die ID meiner Map ist 2.

Das Google Map Script lade ich vorher, im header.

---

Hallo,
die Position des scripts ist eigentlich egal.
Evtl. hilft es die gridSize Option zu variieren ...
Frank

hmm... nix. grid rauf, grid runter. Zoomlevel geändert. immer nur ein Marker zu sehen.
Kann es daran liegen, weil ich eigene Marker einsetze?!

Wenn ich mir den Seitenquelltext anschaue scheint alles richtig zu sein.
Die Punkte werden ausgeliefert, nur nicht auf der Karte gezeichnet?!

HTML-Code:

---

Uncaught ReferenceError: arrMarkers is not defined

---

Zitat:

---

Zitat von Thomas Hinze

hmm... nix. grid rauf, grid runter. Zoomlevel geändert. immer nur ein Marker zu sehen.
Kann es daran liegen, weil ich eigene Marker einsetze?!

Wenn ich mir den Seitenquelltext anschaue scheint alles richtig zu sein.
Die Punkte werden ausgeliefert, nur nicht auf der Karte gezeichnet?!

---

Evtl mal testweise die im BE hinterlegten Marker deaktivieren und wie im ersten Beispiel manuell ein paar Marker anlegen - mal schauen ob diese dann clustern ...
Frank

Fehler gefunden - das Template "ce_dlh_googlemaps_default" darf nicht umbenannt werden.
Ich hatte deine Beispieldaten hochgeladen und da hieß das Template "ce_dlh_googlemaps_cluster"
Es muss exakt so heißen wie das original, sonst wird es ignoriert. Jetzt funzt es!
Danke dir für die schnellen Rückmeldungen.

Gruß Thomas

Hm,
schaue gerade noch mal auf http://hundimfreibad.de/freibaeder.html ...
Abhängig vom Zoom Level werden die Marker bei mir zusammengefaßt ( Windows/Chrome-Browser ) ...

Frank

Zitat:

---

Zitat von Thomas Hinze

Fehler gefunden - das Template "ce_dlh_googlemaps_default" darf nicht umbenannt werden.
Ich hatte deine Beispieldaten hochgeladen und da hieß das Template "ce_dlh_googlemaps_cluster"
Es muss exakt so heißen wie das original, sonst wird es ignoriert. Jetzt funzt es!
Danke dir für die schnellen Rückmeldungen.

Gruß Thomas

---

Warst schneller :-)
Das Template kann umbenannt werden - wenn Du im Artikel das Inhaltselement vom Typ "Google Map" einsetzt kann man unter den "Template-Einstellungen" das jeweilige Template ja auswählen ...
Aber schön das es klappt ...
Frank

PS.: Übrigens - schöne Aktion - haben selbst ne Labbi Hündin ...

Hallo,

ich war so mutig Contao auf 3.4.5 über Live Update zu aktualisieren und sehe nun keine Karte mehr.
Für Maps gibt es noch kein Update.
Kann ich das schnell fixen, oder muss ich zurück auf 3.4.4?

keiner eine Idee?

Bei einem Element stand in dem GeoKoordinaten Feld eine Adresse und keine GeoCode drin.
Falsche Daten gelöscht, gespeichert, fertig.
Bei über 500 Markern hätte ich mir eine Validierung für dieses sensible Feld gewünscht, dass hätte eine lange Suche erspart. ;-)

Super Anleitung,

danke dafür.

Nach viel Bastelei habe ich es endlich hinbekommen mit dem Marker-Clusterer.
Vielen Dank für die guten Tipps hier.
Hätte da aber noch eine Frage:
Ich möchte ein eigenes Icon einsetzten anstatt der roten Standard-Google Markierung.
Leider erscheinen bei mit immer beide. Sowohl mein eigenes Icon als auch das von Google.
Stelle ich auf das ce_dlh_googlemaps standard Template um, funktioniert's...

Weiß jemand Rat?

Zitat:

---

Zitat von Truller500

Nach viel Bastelei habe ich es endlich hinbekommen mit dem Marker-Clusterer.
Vielen Dank für die guten Tipps hier.
Hätte da aber noch eine Frage:
Ich möchte ein eigenes Icon einsetzten anstatt der roten Standard-Google Markierung.
Leider erscheinen bei mit immer beide. Sowohl mein eigenes Icon als auch das von Google.
Stelle ich auf das ce_dlh_googlemaps standard Template um, funktioniert's...

Weiß jemand Rat?

---

Du kannst (musst?) das für jeden Map Eintrag individuell konfigurieren.

Anhang 17505

Das Icon darf jedoch nicht kleiner als 29 Pixel sein, sonst wird es im Firefox nicht angezeigt.
Bin mal bei einem anderen Projekt drüber gestolpert. Ist so ein Ding von Google und Firefox.

29 pix - das ist mir neu.
Danke für den Tipp! Eine nich ganz unerheblich Kleinigkeit.

Hallo,

nachdem ich mit viel Nachdenken und den tollen Tipps hier ein Marker Clustering hinbekommen habe, jetzt die große Enttäuschung:
Es funktioniert nicht mehr.

Es scheint so, als hätte sich die Adresse von diesem Script geändert:
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>

Das schöne Beispiel mit den Hunden im Freiband schein auch nicht mehr zu gehen... :-(

Kann man da etwas machen?

Das Script und Infos hierzu findest Du hier:
https://code.google.com/p/google-map...arkerclusterer

... kleiner Tipp vielleicht noch, wie ich jetzt vorgehen soll...

Gerade wieder diesen Beitrag entdeckt.
Bei mir wird die Karte auch nicht mehr angezeigt.
Welche Scriptpfad sollte ich einbauen, damit es wieder geht.
mit https://code.google.com/archive/p/go...rary-v3/source komm ich irgendwie nicht weiter ;-(

Hier habe ich einige Links zu den Bibliotheken gefunden.
https://stackoverflow.com/questions/...rer-js-library
Leider brachte keiner der Links miene Karte zurück.

Ich bin genau so vorgegangen:

Zitat:

---

Template dlh_marker.html5:
Code:

...
ca. nach Zeile 46:
arrMarkers.push(gmap<?php echo $this->element['id']; ?>_marker);
...

ce_dlh_googlemaps_default.html5:
Code:

...
nach dem öffnenden <script> Tag:

var infoWindowsCount = [];
( Ansonten:
"Uncaught ReferenceError: infoWindowsCount is not defined"
bei Nutzung der Infoblasen und es geht nicht ... )

var arrMarkers = [];
...

if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
}

ersetzen durch:

if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>, arrMarkers);
}

...

Jetzt benötigt man nur noch den dlh_googlemaps Funktionsblock wie folgt:
Code:

<script>
// *ID* = Id der gewünschten Googlemap

function gmap*ID*_dynmap(gmap*ID*, arrMarkers) {

mc = new MarkerClusterer(gmap*ID*, arrMarkers, {maxZoom: 10, gridSize:50});

}
</script>

---

Ganz unten sollte die Karte stehen... Link

Oder muss im Template auch noch irgendwo die Google-Api stehen?