Mehrere Google-Maps-Karten effektiv in eine Website einbinden

Lazy Loading Google Maps Plug-in
Kommentare

Das Einbinden von Google-Maps-Karten – etwa in Kontaktseiten – bietet dem Website-Besucher die Möglichkeit, zum Beispiel Anfahrtsrouten oder Ortsinformationen schnell auf einem Blick zu erlangen, ohne selbst danach suchen zu müssen. Wird allerdings mehr als eine Karte benötigt, kann dies gerade bei Single-Page-Applikationen dazu führen, dass die Seitenperformance beeinträchtigt wird.

Genauso ist anzunehmen, dass nicht alle User bis ans Ende der Seite scrollen, wenn sie schon vorher die gesuchten Informationen gefunden haben – vor allem nicht, wenn sie die Seite von einem mobilen Device aus nutzen. Mit dem Lazy Loading Google Maps Plug-in werden die Google-Maps-API-Script-Dateien erst geladen, wenn sich beim Scrollen oder durch das Anpassen der Fenstergröße eine Karte im Viewport des Browsers befindet. Im Webappers-Blog wurde das Plug-in vorgestellt.

Lazy Loading Google Maps Plug-in im Einsatz

Das Lazy Loading Google Maps Plug-in ist ein leichtgewichtiges jQuery-Plug-in, mit dem Script-Dateien und Karteninstanzen erst nach und nach geladen werden. Das Plug-in überprüft bei jedem Scrollen und Anpassen des Browsers, ob sich Karten im Viewport des Browsers befinden. Sofern die Google-Maps-API-Script-Dateien noch nicht geladen wurden, wird erst dann die Initiierung der zugehörigen Karteninstanzen ausgelöst.

Das Plug-in ist nicht nur für die Einbindung von Karten in Responsive Designs nützlich, es ist auch beim Datenverbrauch – insbesondere bei mobilen Datenverbindungen – effektiv und kann für deutlich schnellere Ladezeiten sorgen.

Der Entwickler des Plug-ins, Osvaldas Valutis, erklärt die Nutzungsmöglichkeiten des Lazy-Loading-Google-Maps-Plug-ins ausführlich und mit Codebeispielen in seinem Blog. Dort findet sich sowohl der Plug-in-Code zum Download, als auch eine Demo des Plug-ins im Einsatz.

Aufmacherbild: Travel destination points on a map indicated with colorful thumbtacks and shallow depth of field with space for copy von Shutterstock / Urheberrecht: Brian A Jackson

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -