ओपन सोर्स लाइब्रेरी

कई ओपन सोर्स लाइब्रेरी, Maps JavaScript API को ज़्यादा सुविधाएं देने के लिए उपलब्ध हैं. इन लाइब्रेरी को GitHub पर वर्शन दिया गया है और इन्हें npm पर पब्लिश किया गया है.

वेब कॉम्पोनेंट

अपनी वेबसाइटों पर मैप की सुविधा तुरंत जोड़ने के लिए, Maps JavaScript API वेब कॉम्पोनेंट का इस्तेमाल करें. वेब कॉम्पोनेंट में बॉयलरप्लेट कोड, सबसे सही तरीके, और रिस्पॉन्सिव डिज़ाइन शामिल होते हैं. इससे, मैप के मुश्किल यूज़र इंटरफ़ेस (यूआई) कम हो जाते हैं, जो कि सिर्फ़ एक एचटीएमएल एलिमेंट में होते हैं.

एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी (बीटा)

Google Maps Platform की एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी, वेब कॉम्पोनेंट का एक सेट होता है. इसकी मदद से, डेवलपर कम समय में और तेज़ी से बेहतर मैप बना पाते हैं.

npm i @googlemaps/extended-component-library

एपीआई लोड हो रहा है

Maps JavaScript API लोड करने के लिए, आधुनिक वेब ऐप्लिकेशन को नीचे दी गई लाइब्रेरी का इस्तेमाल करने से फ़ायदा मिल सकता है.

JS एपीआई लोडर

Promises के साथ Maps JavaScript API को डाइनैमिक तौर पर लोड करना.

npm i @googlemaps/js-api-loader

टाइपस्क्रिप्ट का इस्तेमाल करना

टाइपस्क्रिप्ट का इस्तेमाल करने वाले लोग, इन पैकेज के साथ शुरुआत कर सकते हैं. ज़्यादा जानकारी के लिए, TypeScript गाइड का इस्तेमाल करना लेख पढ़ें.

टाइपस्क्रिप्ट के टाइप

Maps JavaScript API के लिए टाइपस्क्रिप्ट के टाइप

npm i -D @types/google.maps

टाइपस्क्रिप्ट गार्ड

छोटे यूनियन टाइप के लिए टाइपस्क्रिप्ट गार्ड.

npm i -D @googlemaps/typescript-guards

प्रतिक्रिया का इस्तेमाल करना

प्रतिक्रिया देने वाले उपयोगकर्ता, इन पैकेज का इस्तेमाल करके शुरुआत कर सकते हैं.

रिऐक्ट रैपर

Maps JavaScript API को एलान के तौर पर लोड करने के लिए रैपर कॉम्पोनेंट.

npm i @googlemaps/react-wrapper

रिऐक्ट कॉम्पोनेंट (ऐल्फ़ा)

कॉम्पोनेंट और हुक, ताकि Maps JavaScript API को React ऐप्लिकेशन में इंटिग्रेट करने के लिए कॉम्पोनेंट और हुक का इस्तेमाल किया जा सके.

npm i -D @vis.gl/react-google-maps

मार्कर और ओवरले बढ़ाना

नीचे दी गई लाइब्रेरी, मार्कर और ओवरलेव्यू जैसी क्लास का दायरा बढ़ाती हैं.

मार्कर क्लस्टरर

बड़ी मात्रा में मार्कर के लिए, हर ज़ूम-लेवल के क्लस्टर बनाता और मैनेज करता है.

npm i @googlemaps/markerclusterer

मार्कर मैनेजर

मैप व्यूपोर्ट में बदलाव के आधार पर मार्कर जोड़ता और हटाता है.

npm i @googlemaps/markermanager

वेब मैप सेवा (WMS)

किसी मैप में वेब मैप सर्विस (WMS) जैसी ओपन जियोस्पेशियल कंसोर्टियम (OGC) लेयर जोड़ें.

npm i @googlemaps/ogc

मार्कर लेबल

मार्कर में कस्टम एचटीएमएल लेबल जोड़ें.

npm i @googlemaps/markerwithlabel

third.js ओवरले

बेहतर परफ़ॉर्मेंस वाले विज़ुअलाइज़ेशन के लिए, WebGL और तीनJS इस्तेमाल करें.

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 की टेस्टिंग लाइब्रेरी के साथ इस्तेमाल किए जाने वाले मॉक.

npm i -D @googlemaps/jest-mocks

Node.js लाइब्रेरी

ध्यान दें: ये लाइब्रेरी ब्राउज़र के साथ काम नहीं करती हैं. साथ ही, इन्हें 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