Dynamische Map
Nicht ganz so euphorisch werden nun diejenigen sein, die auf Performance und Ladezeit von Webseiten achten.Auf dem folgenden Bild sind nur die Scriptaufrufe eine Seite gelistet, die bezüglich der Map-Erzeugung an Google gehen:
 |
| Google Maps Api Scripte, welche für das laden der JS Variante nötig sind |
Hinzu kommt noch, das die Grafiken der Maps gekachelt (Kacheln à 256x256px) herunter geladen werden. Hier die Requests für die Bild-Kacheln einer Karte in der Größe.
Der Fairness sei es geschuldet zu erwähnen, das die Maps-Komponenten via HTTP/2 Protokoll geladen werden. Hier sind Request nicht "so" performancelastig. (Lesetipp: https://hpbn.co/http2/)
Wir sehen, die Funktionen der dynamischen Maps-Variante (Zoom, Kartenwechsel, etc. ) haben Ihren Preis. Dies ist nicht nur zusätzlicher Javascript-Code der die Funktionalität bereit stellt, auch werden mehrere HTTP-Request ( im obigen Beispiel 24 Stück) dafür abgefeuert.
Static Maps
Vielleicht eine sehr interessante Alternative bieten hier statische Maps. Das bedeutet, über eine URL die entsprechende Parameter enthält wird eine Karte angefragt. Zurückgeliefert wird ein einfaches Bild, das in einem <img> - Tag eingebunden wird.Du willst ne Grafik ??? - Na gut, hier kommt sie :)
Hier die Anfragen für die Map im Network-Panel der Dev-Konsole:
Yep, das war es schon. Die gelieferte Grafik ist 640x388px und dafür gerade mal 37.6KB groß. Ist dir der hübsche Marker aufgefallen?
Die Static-Map erlaubt einige Parameter, die es dir erlauben die Map entsprechend zu gestalten.
Detailliertere Informationen über die Google-Maps-Api's findest du hier:
https://developers.google.com/maps/web/?hl=de
PS: Nein, ein Screenshot von der Karte machen, und fest in seinem Webspace abspeichern ist rechtlich nicht erlaubt!!
xstDev - knowHow für Webentwickler!
.... bleibt mir treu, empfehlt mich weiter.
Sign up here with your email
ConversionConversion EmoticonEmoticon