Maps JavaScript API के लिए, कई ओपन सोर्स लाइब्रेरी उपलब्ध हैं. इनसे अतिरिक्त सुविधाएं मिलती हैं. इन लाइब्रेरी के वर्शन, GitHub पर उपलब्ध हैं. साथ ही, इन्हें npm पर पब्लिश किया गया है.
वेब कॉम्पोनेंट
Maps JavaScript API के वेब कॉम्पोनेंट का इस्तेमाल करके, अपनी वेबसाइटों पर मैप की सुविधा को तुरंत जोड़ें. वेब कॉम्पोनेंट में छोटे-मोटे बदलाव वाले कोड, सबसे सही तरीके, और रिस्पॉन्सिव डिज़ाइन शामिल होते हैं. इससे मैप के जटिल यूज़र इंटरफ़ेस (यूआई) को एक एचटीएमएल एलिमेंट में बदल दिया जाता है.
एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी (बीटा)
Google Maps Platform की Extended Component Library, वेब कॉम्पोनेंट का एक सेट है. इससे डेवलपर को कम समय और कम मेहनत में बेहतर मैप बनाने में मदद मिलती है.
npm i @googlemaps/extended-component-library
एपीआई लोड करना
आधुनिक वेब ऐप्लिकेशन, Maps JavaScript API को लोड करने के लिए यहां दी गई लाइब्रेरी का इस्तेमाल कर सकते हैं.
JS API लोडर
Maps JavaScript API को प्रॉमिस के साथ डाइनैमिक तौर पर लोड करना.
npm i @googlemaps/js-api-loader
टाइपस्क्रिप्ट का इस्तेमाल करना
TypeScript का इस्तेमाल करने वाले लोग, इन पैकेज का इस्तेमाल करके शुरुआत कर सकते हैं. ज़्यादा जानकारी के लिए, TypeScript का इस्तेमाल करने के बारे में गाइड देखें.
TypeScript टाइप
Maps JavaScript API के लिए TypeScript टाइप
npm i -D @types/google.maps
टाइपस्क्रिप्ट गार्ड
यूनियन टाइप को कम करने के लिए, TypeScript गार्ड.
npm i -D @googlemaps/typescript-guards
React का इस्तेमाल करना
React का इस्तेमाल करने वाले लोग, इन पैकेज का इस्तेमाल शुरू कर सकते हैं.
React Google Maps Library
Maps JavaScript API को React ऐप्लिकेशन में इंटिग्रेट करने के लिए कॉम्पोनेंट और हुक.
npm i -D @vis.gl/react-google-maps
React रैपर
Maps JavaScript API को डिक्लेयरटिवली लोड करने के लिए, रैपर कॉम्पोनेंट.
npm i @googlemaps/react-wrapper
मार्कर और ओवरले को बढ़ाना
यहां दी गई लाइब्रेरी, Marker और OverlayView जैसी क्लास को बढ़ाती हैं.
मार्कर क्लस्टर
यह बड़ी संख्या में मार्कर के लिए, ज़ूम करने के हर लेवल के हिसाब से क्लस्टर बनाता है और उन्हें मैनेज करता है.
npm i @googlemaps/markerclusterer
मार्कर मैनेजर
यह कुकी, मैप के व्यूपोर्ट में हुए बदलावों के आधार पर मार्कर जोड़ती और हटाती है.
npm i @googlemaps/markermanager
वेब मैप सेवा (डब्ल्यूएमएस)
मैप में Open Geospatial Consortium (OGC) लेयर जोड़ें. जैसे, Web Map Service (WMS).
npm i @googlemaps/ogc
मार्कर के लेबल
मार्कर में कस्टम एचटीएमएल लेबल जोड़ना.
npm i @googlemaps/markerwithlabel
Three.js ओवरले
बेहतरीन परफ़ॉर्मेंस वाले विज़ुअलाइज़ेशन के लिए, WebGL और ThreeJS का इस्तेमाल करें.
npm i @googlemaps/three
Deck.gl ओवरले
Deck.gl को Google Maps के कस्टम ओवरले के तौर पर इस्तेमाल करें.
npm i @deck.gl/google-maps
जांच और लिंटिंग
इन लाइब्रेरी का इस्तेमाल करके, सबसे सही तरीके अपनाएं और Maps JavaScript API की जांच को आसान बनाएं.
ESLint प्लगिन
अपने कोड को लिंट करने के लिए, ESLint के कस्टम नियमों का इस्तेमाल करें.
npm i -D eslint-plugin-googlemaps
Jest mocks
Jest टेस्टिंग लाइब्रेरी के साथ इस्तेमाल करने के लिए मॉक.
npm i -D @googlemaps/jest-mocks
Node.js लाइब्रेरी
Node.js क्लाइंट लाइब्रेरी
क्लाउड फ़ंक्शन या सर्वरसाइड कोड से कॉल करने के लिए, Node.js क्लाइंट लाइब्रेरी.
npm i @googlemaps/google-maps-services-js
पॉलीलाइन को कोड में बदलना
Node.js में पॉलीलाइन को एन्कोड और डिकोड करना.
npm i @googlemaps/polyline-codec
यूआरएल पर हस्ताक्षर करना
ज़्यादा सुरक्षा के लिए, Node.js में यूआरएल पर हस्ताक्षर करें.
npm i @googlemaps/url-signature