2 verschiedene Kartenzentren, je nach Browserbreite

[Webstylerin]

Halli hallo,

ich habe eine GoogleMap eingefügt, die bei breiter Auflösung die Kontaktdaten drübergelegt hat und habe daher den Mittelpunkt in den Optionen etwas verschoben.

Nun ist es so, dass für Smartphones die Daten nicht mehr über der Map liegen, sonst kann man ja nichts mehr von der Karte sehen. Natürlich nimmt er dennoch den verschobenen Mittelpunkt und somit sieht man die Markierung nicht mehr.

Wie muss ich wo was eintragen, damit er unter 768px ein anderes Kartenzentrum her nimmt?

Das hab ich per Google gefunden: http://stackoverflow.com/questions/3...on-media-query

Ist genau das, was ich möchte, jedoch blicke ich schlichtweg nicht, wo genau der Code rein soll. :/

Kann mich jemand aufklären.

Sonnige Grüße
Nicole

[Spooky]

Erstelle dir ein neues Template namens j_google_maps_center, füge folgenden Code in das Template ein:

<script>
google.maps.event.addDomListener(window, 'resize', function() {
  if (window.matchMedia("(max-width: 768px)").matches) {
    map.setCenter(new google.maps.LatLng(smallLat,smallLng));
  }
});
</script>

(smallLat,smallLng musst du natürlich selbst ersetzen) und wähle dieses Template dann in deinem Seitenlayout aus. (ungetestet)

[Webstylerin]

Ist eingebunden, aber es passiert nichts. Weder Fehler noch irgendeine Änderung des Mittelpunktes.

Weiß denn der JS-Schnipsel welche Map er ändern soll?

[Spooky]

Hm, stimmt, du müsstest dir dafür eigentlich ein eigenes ce_dlh_googlemaps_default Template machen. Dort gibt es dann

var gmap<?php echo $this->map['id']; ?> = new google.maps.Map(document.getElementById("dlh_googlemap_<?php echo $this->map['id']; ?>"), gmap<?php echo $this->map['id']; ?>_Options);

Da könntest du dich direkt danach einklinken mit

google.maps.event.addDomListener(window, 'resize', function() {
  if (window.matchMedia("(max-width: 768px)").matches) {
    gmap<?php echo $this->map['id']; ?>.setCenter(new google.maps.LatLng(smallLat,smallLng));
  }
});

[Andreas]

Ich hatte mir mal ne responsive Lösung für die dlh_googlemaps erarbeitet. Vielleicht ist das ja genau das, was du benötigst. Hier ist sie im Einsatz http://yesdo.de/kontakt.html

ce_dlh_googlemaps_responsive

// snip

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

// Responsive patch
    var center;
    function calculateCenter() {
        center = gmap<?php echo $this->map['id']; ?>.getCenter();
    }
    google.maps.event.addDomListener(gmap<?php echo $this->map['id']; ?>, 'idle', function() {
        calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        google.maps.event.trigger(gmap<?php echo $this->map['id']; ?>, 'resize');
        gmap<?php echo $this->map['id']; ?>.setCenter(center);
    });
// Responsive patch END

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

// snip

Er besteht aus diesem Patch Block im Template. Die Map ist auf 100% Breite und Höhe eingestellt. Die Höhe regelt man mit dem padding-bottom - bei 100% ist es quadratisch. Bei 62.5% hast du ein Verhältnis 16:10 (10 / 16 = 0,625).

CSS:

/* ... Googlemap responsive ...
-------------------------------------------------------------------------------------------------*/
.ce_dlh_googlemaps {
  padding-bottom: 56.25%;
  position: relative;
}
.dlh_googlemap {
  position: absolute;
}
/* ... Googlemap responsive ... END
-------------------------------------------------------------------------------------------------*/

Ich habe bei mir noch das hier drin

.dlh_googlemap {
  width: calc(100% - 20px) !important;
}

Aber das ist glaube ich nur wegen des Grids welches da noch drauf liegt.

[Webstylerin]

Vielen Dank euch beiden, mit eurer Hilfe hab ich es geschafft das Template "ce_dlh_googlemaps_default.html5" so zu erweitern, dass es macht was ich will.

Wie gesagt, ich hab der GoogleMap via Contao ein Kartenzentrum gegeben, dass etwas rechts der eigentlichen Adresse (und dem Marker) liegt, damit auf der rechten Seite die Kontaktdaten direkt auf der Map stehen können.

Unter 768px Browserbreite sind die Kontaktdaten aber oberhalb der Map und die Karte muss ein neues Center bekommen.

Für alle mit einem ähnlichen Problem, so sieht mein Code momentan aus:

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

// Center Map on Smartphones START
    //Center on Load
    if (window.matchMedia("(max-width: 768px)").matches) {
      gmap<?php echo $this->map['id']; ?>.setCenter(new google.maps.LatLng(52.55817,13.14073));
    }
    //Center on Resize
    google.maps.event.addDomListener(window, 'resize', function() {
      if (window.matchMedia("(max-width: 768px)").matches) {
        gmap<?php echo $this->map['id']; ?>.setCenter(new google.maps.LatLng(52.55817,13.14073));
      } else {
        gmap<?php echo $this->map['id']; ?>.setCenter(new google.maps.LatLng(<?php echo $this->map['center']; ?>));
      }
    });
// Center Map on Smartphones END 

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

Eventuell verfeinere ich das noch etwas, so das z.B. das Centrum automatisch berechnet wird und es vielleicht noch einen Zwischenschritt für Tablets gibt, gerade fehlt mir aber die Zeit. Sollte sich da noch was tun, werde ich es hier posten.

LG & nochmals Danke für eure Hilfe!
Nicole