Zoom-Faktor bei Kartenanzeige auf Mobilgeräten ändern

[3dr]

Zunächst vielen Dank für diese Erweiterung, wenn man sich selbst mal mit der Erstellung einer Karte mit mehreren Markern und Infofenstern beschäftigt hat, weiss man die viele Arbeit schätzen! Ein Problem habe ich jedoch noch: Wähle ich einen Zoom-Faktor der auf Desktop-Monitoren alle Marker (z.B 10 Stück) zeigt, werden mir mit diesem Faktor auf mobilen Geräten nur noch einige Marker angezeigt. Wie kann ich das korrigieren? Danke für Tipps und Hinweise.

[stefan-at-work]

Würde ich evt. mit der Erweiterung contao-mobilecontent und zwei verschiedenen Versionen der Karte lösen.

[3dr]

@stefan-at-work,
Danke für deine schnelle Hilfe, die Erweiterung kenne ich nicht, aber du bringst mich auf eine Idee: ich könnte eine zweite Karte generieren und via CSS an dem gewünschten Breakpoint die Karten ein/ausblenden -obwohl: wird dann die Ladezeiten verlängern. Gibt es da keine andere Möglichkeit den Zoomfaktor (ohne massiven js-Einsatz) anzupassen?

[Andreas]

Als Ansatz (ungetestet): Das Script überwacht schon Größenänderungen und zentriert daraufhin die Karte. Dort kann man versuchen das Zoom auch dynamisch nachzuregeln, in irgendeiner Relation zur Viewport-Breite. Hier die erste Zeile ist aus dem Template und die zweite Zeile mein Ansatz:

gmap<?=$this->map['id'];?>.setCenter(center);
gmap<?=$this->map['id'];?>.setZoom(<?=$this->map['zoom']?> * $(window).width() / 1900);

Zum Debuggen in der Konsole kannst du mal diese Zeilen hier direkt darunter setzen.

console.clear();
console.log(<?=$this->map['zoom']?>);
console.log($(window).width());
console.log(<?=$this->map['zoom']?> * $(window).width() / 1900);

[3dr]

@Andreas, vielen Dank für die schnelle und ausführliche Rückmeldung, leider bin ich kein Entwickler, deine Ansätze werde ich daher wohl kaum umsetzen können. Wenn ich die von dir genannten Befehle in die Konsole eingebe, ich erhalte ich immer:

SyntaxError: expected expression, got '<'

Was mache ich falsch?

Bei meiner Suche bin ich gestern auf diesen Hinweis bei stackoverflow gestossen: center-set-zoom-of-map-to-cover-all-visible-markers Das müsste irgendwie in die Erweiterung implementiert werden, ich schaffe das leider nicht.

Grundsätzlich hielt ich ein solches Verhalten für eine gute Verbesserung, aktuell habe ich Marker ganz im Westen und ganz im Osten Deutschlands, mit den derzeitigen Möglichkeiten wird auf einem Smartphone im Portraitmode nur die Mitte Deutschlands ohne Marker angezeigt. Wie löst ihr das derzeit?

[Andreas]

Mein Beispiel von oben funktioniert (nachdem ich den Wert für Zoom noch durch parseInt() gejagt hatte). Aber das macht keinen Sinn, deswegen brauchen wir da auch nicht weiter nach nem Fehler zu suchen.

Das mit dem fitBounds() hast du gut gefunden. Hier der Patch.

1. Ersetze im ROOT\templates\ce_dlh_googlemaps_default.html5 (oder umbenennen und zuweisen) die komplette Funktion google.maps.event.addDomListener() mit dieser Funktion hier:

    /**
     * Fit to bounds Patch 1
     * Fit to bounds with multiple markers on resize else center
     */
    google.maps.event.addDomListener(window, 'resize', function() {

      // with multiple markers
      if(gmap<?=$this->map['id'];?>_markers.length > 1) {
        // new empty LatLngBounds object
        var bounds = new google.maps.LatLngBounds();

        // put markers into bounds object
        for (var i = 0; i < gmap<?=$this->map['id'];?>_markers.length; i++) {
          bounds.extend(gmap<?=$this->map['id'];?>_markers[i].getPosition());
        }
        // Remove one zoom level after fitBounds() to ensure no marker is on the edge
        google.maps.event.addListenerOnce(gmap<?=$this->map['id'];?>, 'bounds_changed', function() {
          this.setZoom(gmap<?=$this->map['id'];?>.getZoom()-1);
        });
        // Fit
        gmap<?=$this->map['id'];?>.fitBounds(bounds);
      }

      // with only one marker
      else {
        var center = gmap<?= $this->map['id'];?>.getCenter();
        google.maps.event.trigger(gmap<?= $this->map['id'];?>, 'resize');
        gmap<?=$this->map['id'];?>.setCenter(center);
      }
    });
    /** Fit to bounds Patch 1 - END */

2. Ergänze die gmap_initialize() Funktion im gleichen Template am Ende mit diesem Block:

    // tabcontrol
    echo $this->tabs ? $this->map['tabsCode'] : ''; ?>

    /**
     * Fit to bounds Patch 2
     * Fit to bounds with multiple markers on first run
     */
    // only with multiple markers
    if(gmap<?=$this->map['id'];?>_markers.length > 1) {
      // new empty LatLngBounds object
      var bounds = new google.maps.LatLngBounds();

      // put markers into bounds object
      for (var i = 0; i < gmap<?=$this->map['id'];?>_markers.length; i++) {
        bounds.extend(gmap<?=$this->map['id'];?>_markers[i].getPosition());
      }
      // Remove one zoom level after fitBounds() to ensure no marker is on the edge
      google.maps.event.addListenerOnce(gmap<?=$this->map['id'];?>, 'bounds_changed', function() {
        this.setZoom(gmap<?=$this->map['id'];?>.getZoom()-1);
      });
      // Fit
      gmap<?=$this->map['id'];?>.fitBounds(bounds);
    }
    /** Fit to bounds Patch 2 - END */

[3dr]

@Andreas,
so jetzt habe ich das mal eingebaut, funktioniert eigentlich sehr gut, vielen Dank für deine Arbeit. Ein Problem habe ich jedoch noch, eine Eingabe eines Zoomlevels hat keine Auswirkungen auf die Darstellung der Karte im FE. Wenn ich mit meinen rudimentären JS-Kenntnissen das richtig verstanden habe, gibt es da eine Funktion, die den Zoomlevel ausliest und dann um eine Stufe verringert, damit kein Marker auf der Kante sitzt

// Remove one zoom level after fitBounds() to ensure no marker is on the edge 
        google.maps.event.addListenerOnce(gmap<?=$this->map['id'];?>, 'bounds_changed', function(event) { 
          this.setZoom(gmap<?=$this->map['id'];?>.getZoom()-1); 
        });

Das scheint bei mir nicht zu funktionieren, kann das sein oder habe ich da noch einen Fehler gemacht. Das Verhalten bei nur einem Marker habe ich nicht geprüft. Vielen Dank falls du dir das nochmal anschaust.

[Andreas]

fitBounds() stellt den Zoom-Level ja so ein, dass dein angegebener Zoomlevel dementsprechend korrigiert wird, sodass alle Marker in die Ansicht passen, das ist also normal und auch so gewollt.

Meine Test hatten alle funktioniert. Hast du das -1 mal gegen -3 oder so ausgetauscht? Das bei mir nochmal zu testen würde wohl nichts bringen. Wenn, dann müsste ich mir das mal auf deiner Seite ansehen.

Was ich nicht getestet hatte, war mit Clustern.

[Andreas]

// Remove one zoom level after fitBounds() to ensure no marker is on the edge
google.maps.event.addListenerOnce(gmap<?=$this->map['id'];?>, 'bounds_changed', function() {
  this.setZoom(gmap<?=$this->map['id'];?>.getZoom()-1);
});

Ja, das ist ein Eventlistener, welcher feuert, nachdem fitBounds() ausgeführt wurde (bounds_changed). Es wird also nicht der Zoomlevel ausgelesen, den du im BE gesetzt hast, sondern der Zoomlevel, welchen fitBounds() gerade erst eingestellt hat.

Obwohl dieser Listener oberhalb von fitBounds() deklariert wird, wird er erst nach fitBounds() ausgeführt und zwar nur dann, wenn fitBounds() auch tatsächlich die Bounds geändert hat (bounds_changed). Er steht mit Absicht oberhalb.

Ohne dieses zusätzliche Feature - Zoom-1 - würden sich die Marker unschön sehr dicht an den Rändern befinden.

[3dr]

@Andreas, Danke mal wieder für deine präzisen Hinweise und Erläuterungen. Ich hatte die Funktion offensichtlich falsch verstanden. In meinem Fall ist der automatische gesetzte Zoomfaktor zu gering, das heißt es wird mir zu weit ausgezoomt.

getZoom()

akzeptiert bei mir nur negative Werte, daher habe ich diesen Teil auskommentiert und bin jetzt auf allen Geräten mit der Darstellung zufrieden. Danke für deinen Support.

[Andreas]

Wäre schön, wenn ich mir den Einsatz auf deiner Seite mal ansehen könnte.

[3dr]

Schritt zurück, ich habe den auskommentierten Teil wieder eingebunden da beim Öffnen eines Infofensters in kleinen Bildschirmen andere Marker aus dem sichtbaren Bereich verschwanden und auch nach dem Schließen nicht wieder sichtbar wurden, da sich die Karte nicht neu justiert (meine aber irgendwo bei Google gelesen zu haben, dass sich auch das nachrüsten läßt). Ich bin aber jetzt auf jeden Fall schon mal zufrieden. @Andreas: Wenn die Site mal halbwegs für Dritte zumutbar ist, kann ich dir gerne einen Link schicken -das wir aber bestimmt länger dauern als das Amazonpäckchen für dich

[Andreas]

Ah, ja

Wenn es gut ist und getestet wurde, würde ich es nämlich gerne als Feature-Request einstellen. Scheint mit ein sehr brauchbares Feature zu sein.

Finde ich gut, dass du versuchtst den Code zu lesen und zu verstehen. So kannst du bestimmt auch noch andere Features dazu packen.

Ja, ich kann mich auch dran erinnern, dass mich da mal was gestört hatte wenn man Info-Windows öffnet und wieder schließt. Das kann man ja auch korrigieren. Schaue ich mir mal an, wenn mir das wieder mal auffällt.

ps Ich habe oben das event aus dem function(event) entfernt, weil dieser Parameter ja nicht benutzt wird.