Über Open-Source-Bibliotheken lassen sich viele 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. Bei Webkomponenten sind Boilerplate-Code, Best Practices und responsives Webdesign enthalten. Dadurch werden komplexe Karten-UIs zu einem einzelnen HTML-Element reduziert.
Bibliothek der erweiterten Komponenten
Die Bibliothek der erweiterten Komponenten 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
React-Wrapper
Eine Wrapper-Komponente zum deklarativen Laden der Maps JavaScript API
npm i @googlemaps/react-wrapper
TypeScript verwenden
TypeScript-Nutzer können folgende Pakete verwenden. Weitere Informationen finden Sie im Leitfaden zu TypeScript.
TypeScript-Schutzmaßnahmen
TypeScript nutzt Schutzmaßnahmen, um Variablen auf Union-Typen einzugrenzen.
npm i -D @googlemaps/typescript-guards
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
Damit werden Markierungen basierend auf den Änderungen am Darstellungsbereich der Karte hinzugefügt und entfernt.
npm i @googlemaps/markermanager
Web Map Service (WMS)
Damit werden auf einer Karte Open Geospatial Consortium-Ebenen (OGC) wie ein Web Map Service (WMS) eingefügt.
npm i @googlemaps/ogc
Markierungslabels
Damit werden Markierungen benutzerdefinierte HTML-Labels hinzugefügt.
npm i @googlemaps/markerwithlabel
Three.js-Overlays
Verwenden Sie WebGL und ThreeJS für leistungsstarke Visualisierungen.
npm i @googlemaps/three
deck.gl-Overlays
Verwenden Sie deck.gl als benutzerdefiniertes Google Maps-Karten-Overlay.
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
