Über viele Open-Source-Bibliotheken lassen sich zusätzliche Funktionen in die Maps JavaScript API einbinden. Diese Bibliotheken werden auf GitHub versioniert und in npm veröffentlicht.
Webkomponenten
Mit den Maps JavaScript API-Webkomponenten können Sie Ihren Websites schnell Kartenfunktionen hinzufügen. In Webkomponenten sind Boilerplate-Code, Best Practices und responsives Webdesign gekapselt. Dadurch werden komplexe Karten-UIs praktisch auf ein einziges HTML-Element reduziert.
Erweiterte Komponentenbibliothek (Beta)
Die erweiterte Komponentenbibliothek der Google Maps Platform umfasst eine Reihe von Webkomponenten, mit denen Entwickler bessere Karten schneller und einfacher erstellen können.
npm i @googlemaps/extended-component-library
API laden
Moderne Webanwendungen können beim Laden der Maps JavaScript API von der Verwendung folgender Bibliotheken profitieren.
JS-API-Ladeprogramm
Mit Promises wird die Maps JavaScript API dynamisch geladen.
npm i @googlemaps/js-api-loader
TypeScript verwenden
TypeScript-Nutzer können zum Einstieg folgende Pakete verwenden. Weitere Informationen finden Sie im Leitfaden zu TypeScript.
TypeScript-Schutzmaßnahmen
TypeScript verwendet Schutzmaßnahmen, um Variablen vom Typ „Union“ einzugrenzen.
npm i -D @googlemaps/typescript-guards
React verwenden
React-Nutzer können zum Einstieg folgende Pakete verwenden.
React-Bibliothek für Google Maps
Komponenten und Hooks zum Einbinden der Maps JavaScript API in React-Anwendungen.
npm i -D @vis.gl/react-google-maps
React-Wrapper
Eine Wrapper-Komponente zum deklarativen Laden der Maps JavaScript API.
npm i @googlemaps/react-wrapper
Markierungen und Overlays erweitern
Mit folgenden Bibliotheken lassen sich Klassen wie „Marker“ und „OverlayView“ erweitern.
Markierungscluster
Damit werden Cluster für die verschiedenen Zoomstufen für große Mengen von Markierungen erstellt und verwaltet.
npm i @googlemaps/markerclusterer
Markierungsmanager
Dient zum Hinzufügen und Entfernen von Markierungen je nach den Änderungen am Darstellungsbereich der Karte.
npm i @googlemaps/markermanager
Web Map Service (WMS)
Damit werden auf einer Karte OGS-Ebenen (Open Geospatial Consortium) wie etwa ein Web Map Service (WMS) eingefügt.
npm i @googlemaps/ogc
Markierungslabels
Dienen zum Hinzufügen von benutzerdefinierten HTML-Labels zu Markierungen.
npm i @googlemaps/markerwithlabel
Three.js-Overlays
Zusammen mit WebGL ermöglicht ThreeJS leistungsstarke Visualisierungen.
npm i @googlemaps/three
deck.gl-Overlays
Benutzerdefinierte Google Maps-Karten-Overlays sind mit Deck.gl einfach zu erstellen.
npm i @deck.gl/google-maps
Tests und Lint nutzen
Mit diesen Bibliotheken können Sie Best Practices umsetzen und Tests für die Maps JavaScript API vereinfachen.
ESLint-Plug-in
Mit den benutzerdefinierten ESLint-Regeln können Sie Lint für Ihren Code nutzen.
npm i -D eslint-plugin-googlemaps
Jest-Simulationen
Diese Simulationen können mit der Jest-Testbibliothek verwendet werden.
npm i -D @googlemaps/jest-mocks
Node.js-Bibliotheken
Node.js-Clientbibliothek
Mit der Node.js-Clientbibliothek können Sie Aufrufe an Cloud Functions oder serverseitigen Code senden.
npm i @googlemaps/google-maps-services-js
Polylinien-Codierung
Damit können Sie Polylinien in Node.js codieren und decodieren.
npm i @googlemaps/polyline-codec
URL-Signatur
Damit lassen sich URLs als zusätzliche Sicherheitsmaßnahme in Node.js signieren.
npm i @googlemaps/url-signature
