Google Werkzeuge | Javascript

Responsive Google Map – Map nach Resize zeitverzögert laden

Die Breite eines Googlemap-Div-Containers anzupassen ist kein Problem. Der Container wird einfach auf eine Mindestbreite von 100% beschränkt. Mit einer prozentuellen Höhenangabe bleibt die Googlemap-Anzeige aber auf der Strecke. Die gewünschte Höhe muss daher mit Padding festgelegt werden. Die Prozentangabe orientiert sich an der Breite des Div-Containers. 50% würde beispielsweise bedeuten die Map wird halb so hoch wie sie breit ist.

.embed-wrapper { position: relative; padding-bottom: 50%; height: 0; overflow:hidden; margin-top: 19px; margin-bottom: 19px;; } .embed-wrapper > .mapdiv { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; }

Der Googlemap-Div-Container wird dann nicht nur seine Größe der Fensterbreite anpassen, sondern auch seine Proportionen behalten. Aber die Map selbst behält die Größe in der sie intialisiert wurde, normalerweise bei. Bei einem kleineren Fenster sieht man nur noch einen Ausschnitt und verliert womöglich den Marker aus dem Bild. Um zu erreichen, dass sich die Map den neuen Div-Container-Dimensionen anpasst, diese neben (document).ready mit Zeitverzögerung auch auf resize() initialisieren.

Sollte es trotz Zeitverzögerung (1000 = 1 Sekunde) zu einer Überschreitung von Abfragelimits kommen, die resize und afterResizing functions ausmarkieren oder löschen. Die Map ist dann zwar nicht mehr responsive, aber der Div-Containter passt sich auf Grund von CSS-Stildefinitionen an, und die Initialisierung orientiert sich ja an der Fenstergröße in dem Moment an dem die Seite geladen wird. Mobilgeräte bekommen die Map auf jeden Fall in geeigneter Größe.

jQuery(document).ready(function() { init_map(); }); jQuery(window).resize(function() { clearTimeout(this.id); this.id = setTimeout(afterResizing, 1000); }); function afterResizing() { init_map(); }

Den gesamten Code (WordPress-Plugin) gibt’s bei Github.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.