Was die neuen Google Maps Web Components leisten – und wie Sie damit schneller Maps-Anwendungen entwickeln.
Die Google Maps Platform liefert riesige Mengen präziser, umfassender und aktueller Geodaten zu Karten, Orten und Routen. Diese Daten in sauber gestalteten UI-Elementen darzustellen, kostet jedoch oft viele Codezeilen und Entwicklerstunden.
In diesem Beitrag werfen wir einen Blick auf die Möglichkeiten und Vorteile der neuen Google Maps Web Components für die Webentwicklung.
Was sind Google Maps Web Components?
Das Team hinter der Google Maps Platform hat kürzlich Web Components vorgestellt – ein innovativer Ansatz, mit dem Webentwickler die Funktionen der Google Maps Platform einfacher und schneller nutzen können. Schon mit grundlegenden JavaScript-Kenntnissen lässt sich eine Karte in wenigen Zeilen Code anzeigen. Einmal eingebunden, folgt der Code den vertrauten Mustern anderer HTML-Elemente. Hier finden Sie Beispiele für die Umsetzung von Maps Web Components in TypeScript, JavaScript, CSS und HTML.
Web Components sind ein etablierter W3C-Standard, mit dem sich HTML, CSS und JavaScript in einem eigenen, wiederverwendbaren HTML-Element kapseln lassen. Solche Komponenten reichen von kleinen Bausteinen wie der Sternebewertung eines Orts bis hin zu deutlich komplexerer Business-Logik – etwa der Erfassung der Lieferadresse für den E-Commerce-Versand oder der Darstellung einer Route auf der Karte mit individuellen Markern und Polyline-Stilen. Web Components lassen sich problemlos mit jedem JavaScript-Framework kombinieren, sind schnell erlernt, halten den Code schlank und gut lesbar – und Webentwickler kommen damit deutlich schneller ans Ziel.
Die Google Maps Platform bindet Web Components über ihre Open-Source-Bibliothek Extended Component Library ein. Sie bündelt Best Practices, Boilerplate-Code, gängige UX/UI-Muster, Responsiveness und Barrierefreiheit – und geht damit über das hinaus, was die Maps JavaScript API von Haus aus mitbringt. Komplexe Karten-UIs schrumpfen so auf praktisch ein einziges HTML-Element zusammen.
Google Maps Web Components einbinden
Die Web Components für Karten und Advanced Markers stehen Ihnen direkt über die Maps JavaScript API zur Verfügung – ein einfacher und schneller Weg, diese UI-Funktionen mit minimalem JavaScript-Aufwand zu integrieren. Die Map-Komponente zeigt eine Karte auf einer Webseite an und gibt Ihnen Zugriff auf weitere kartenbezogene Elemente, etwa Advanced Markers innerhalb der Map-Komponente in HTML. Auch das Erscheinungsbild der Karte können Sie an Ihren Anwendungsfall oder Ihre Marke anpassen: Mit dem cloudbasierten Map Styling von Google Maps reicht dafür eine Map ID im Bereich Google Maps der GCP Console.
Das folgende Beispiel zeigt, wie sich Informationen zu einem Ort allein mit HTML auf einer Karte darstellen lassen:
Ressourcen zu Google Maps Web Components
Die Dokumentation zu den Web Components der Google Maps JavaScript API finden Sie hier, die Open-Source-Bibliothek Google Maps Extended Component Library liegt auf GitHub und auf NPM bereit. Mit diesen Ressourcen entstehen wiederverwendbare Bausteine, die sich mit wenigen Zeilen HTML einbinden, anpassen und kombinieren lassen – die Implementierung der Google Maps JavaScript API wird damit spürbar einfacher, schneller und kosteneffizienter. Sie möchten mehr über die Google Maps Platform und Web Components erfahren? Schreiben Sie mir an [email protected].