कई ओपन सोर्स लाइब्रेरी Maps JavaScript एपीआई. इन लाइब्रेरी के वर्शन GitHub पर और इसमें प्रकाशित किया गया है एनपीएम.
वेब कॉम्पोनेंट
Maps JavaScript API वेब का इस्तेमाल करें मैप फटाफट जोड़ने के लिए कॉम्पोनेंट कैसे काम करता है. वेब कॉम्पोनेंट, बॉयलरप्लेट कोड को एनकैप्सुलेट करते हैं, और रिस्पॉन्सिव डिज़ाइन के लिए सबसे सही तरीके इस्तेमाल किए जाते हैं. इससे मैप के जटिल यूज़र इंटरफ़ेस (यूआई) कम हो जाते हैं. एक एचटीएमएल एलिमेंट हो सकता है.
एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी (बीटा)
Google Maps Platform एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी, वेब कॉम्पोनेंट का एक सेट है. इससे डेवलपर को बेहतर मैप बनाने में मदद मिलती है वह भी तेज़ी से और कम मेहनत में.
npm i @googlemaps/extended-component-library
एपीआई लोड हो रहा है
आधुनिक वेब ऐप्लिकेशन को Maps JavaScript API को लोड करने के लिए, नीचे दी गई लाइब्रेरी का इस्तेमाल करने से फ़ायदा हो सकता है.
JS API लोडर
प्रॉमिस के साथ Maps JavaScript API को डाइनैमिक तरीके से लोड करें.
npm i @googlemaps/js-api-loader
TypeScript का इस्तेमाल करना
TypeScript के उपयोगकर्ता इन पैकेज का इस्तेमाल शुरू कर सकते हैं. अतिरिक्त जानकारी के लिए TypeScript गाइड का इस्तेमाल करना देखें.
TypeScript के टाइप
Maps JavaScript API के लिए TypeScript के टाइप
npm i -D @types/google.maps
TypeScript गार्ड
TypeScript, नैरो यूनियन टाइप को गार्ड करता है.
npm i -D @googlemaps/typescript-guards
React का इस्तेमाल करना
प्रतिक्रिया देने वाले उपयोगकर्ता, इन पैकेज का इस्तेमाल कर सकते हैं.
Google Maps लाइब्रेरी पर प्रतिक्रिया दें
Maps JavaScript API को React ऐप्लिकेशन में इंटिग्रेट करने के लिए कॉम्पोनेंट और हुक.
npm i -D @vis.gl/react-google-maps
प्रतिक्रिया वाला रैपर
Maps JavaScript API को एलान के तौर पर लोड करने के लिए एक रैपर कॉम्पोनेंट.
npm i @googlemaps/react-wrapper
मार्कर और ओवरले को बढ़ाना
नीचे दी गई लाइब्रेरी, मार्कर और OverlayView जैसी क्लास को बढ़ाती हैं.
मार्कर क्लस्टर
ज़्यादा मार्कर के लिए, हर ज़ूम-लेवल के क्लस्टर बनाता और मैनेज करता है.
npm i @googlemaps/markerclusterer
मार्कर मैनेजर
मैप व्यूपोर्ट में बदलावों के आधार पर मार्कर जोड़ता है और हटाता है.
npm i @googlemaps/markermanager
वेब मैप सेवा (WMS)
किसी मैप में, Web Map Service (WMS) जैसी ओपन जियोस्पेशियल कंसोर्टियम (OGC) लेयर जोड़ें.
npm i @googlemaps/ogc
मार्कर लेबल
मार्कर में कस्टम एचटीएमएल लेबल जोड़ें.
npm i @googlemaps/markerwithlabel
तीन.js ओवरले
बेहतर परफ़ॉर्म करने वाले विज़ुअलाइज़ेशन के लिए WebGL और तीन जेएस का इस्तेमाल करें.
npm i @googlemaps/three
Deck.gl ओवरले
Google Maps ओवरले के तौर पर Deck.gl का इस्तेमाल करें.
npm i @deck.gl/google-maps
लिंटिंग और लिंटिंग की जांच करना
सबसे सही तरीके पक्का करने और Maps JavaScript API के लिए टेस्टिंग को आसान बनाने के लिए, इन लाइब्रेरी का इस्तेमाल करें.
ESLint प्लगिन
अपने कोड को लिंट करने के लिए, पसंद के मुताबिक ESLint नियमों का इस्तेमाल करें.
npm i -D eslint-plugin-googlemaps
जेस्ट मॉक
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