Maps JavaScript API'ye ek özellikler sağlamak için birçok açık kaynak kitaplık kullanılabilir. Bu kitaplıklar GitHub'da sürüm oluşturulur ve npm'de yayınlanır.
Web Bileşenleri
Web sitelerinize hızlıca harita işlevi eklemek için Maps JavaScript API Web Bileşenleri'ni kullanın. Web bileşenleri, standart kodu, en iyi uygulamaları ve duyarlı tasarımı kapsar. Böylece karmaşık harita kullanıcı arayüzleri, tek bir HTML öğesi haline gelir.
Genişletilmiş Bileşen Kitaplığı (Beta)
Google Haritalar Platformu Genişletilmiş Bileşen Kitaplığı, geliştiricilerin daha kısa sürede ve daha az çabayla daha iyi haritalar oluşturmasına yardımcı olan bir Web Bileşenleri kümesidir.
npm i @googlemaps/extended-component-library
API yükleniyor
Modern web uygulamaları, Maps JavaScript API'yi yüklemek için aşağıdaki kitaplıkları kullanmaktan yararlanabilir.
JS API yükleyicisi
Maps JavaScript API'yi Promises ile dinamik olarak yükleyin.
npm i @googlemaps/js-api-loader
TypeScript'i kullanma
TypeScript kullanıcıları aşağıdaki paketlerle başlayabilir. Ek bilgi için TypeScript kullanma kılavuzunu inceleyin.
TypeScript türleri
Maps JavaScript API için TypeScript türleri
npm i -D @types/google.maps
TypeScript korumaları
Birleşim türlerini daraltmak için TypeScript korumaları.
npm i -D @googlemaps/typescript-guards
React'i kullanma
React kullanıcıları aşağıdaki paketlerle başlayabilir.
React Google Haritalar Kitaplığı
Maps JavaScript API'yi React uygulamalarına entegre etmek için kullanılan bileşenler ve kancalar.
npm i -D @vis.gl/react-google-maps
React sarmalayıcısı
Maps JavaScript API'yi bildirimsel olarak yüklemek için kullanılan bir sarmalayıcı bileşen.
npm i @googlemaps/react-wrapper
İşaretçileri ve yer paylaşımlarını genişletme
Aşağıdaki kitaplıklar, Marker ve OverlayView gibi sınıfları genişletir.
İşaretçi grupları
Çok sayıda işaretçi için her yakınlaştırma düzeyinde kümeler oluşturur ve bunları yönetir.
npm i @googlemaps/markerclusterer
İşaretçi yöneticisi
Harita görüntü alanı değişikliklerine göre işaretçi ekler ve kaldırır.
npm i @googlemaps/markermanager
Web harita hizmeti (WMS)
Web Harita Hizmeti (WMS) gibi Open Geospatial Consortium (OGC) katmanlarını haritaya ekleyin.
npm i @googlemaps/ogc
İşaretçi etiketleri
İşaretçilere özel HTML etiketleri ekleyin.
npm i @googlemaps/markerwithlabel
Three.js yer paylaşımları
Yüksek performanslı görselleştirmeler için WebGL ve ThreeJS'yi kullanın.
npm i @googlemaps/three
Deck.gl yer paylaşımları
Deck.gl'yi özel bir Google Haritalar yerleşimi olarak kullanma
npm i @deck.gl/google-maps
Test etme ve linting
En iyi uygulamaları sağlamak ve Maps JavaScript API'nin test edilmesini kolaylaştırmak için bu kitaplıkları kullanın.
ESLint eklentisi
Kodunuzda hata ayıklamak için özel ESLint kurallarını kullanın.
npm i -D eslint-plugin-googlemaps
Jest mocks
Jest test kitaplığıyla kullanılacak sahte veriler.
npm i -D @googlemaps/jest-mocks
Node.js kitaplıkları
Node.js istemci kitaplığı
Bulut işlevlerinden veya sunucu tarafı kodundan arama yapmak için Node.js istemci kitaplığı.
npm i @googlemaps/google-maps-services-js
Çoklu çizgi kodlama
Node.js'de çoklu çizgileri kodlama ve kod çözme.
npm i @googlemaps/polyline-codec
URL imzalama
Ek güvenlik için Node.js'de URL'leri imzalayın.
npm i @googlemaps/url-signature