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

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

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

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

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

npm i @googlemaps/extended-component-library

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

Maps JavaScript 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 का इस्तेमाल करना

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

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

npm i @googlemaps/react-wrapper

React ऐप्लिकेशन में इंटिग्रेट करने के लिए कॉम्पोनेंट और हुक.

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

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

इन लाइब्रेरी में मार्कर और ओवरले व्यू जैसी क्लास भी शामिल हैं.

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

npm i @googlemaps/markerclusterer

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

npm i @googlemaps/markermanager

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

npm i @googlemaps/ogc

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

npm i @googlemaps/markerwithlabel

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

npm i @googlemaps/three

Google Maps के कस्टम ओवरले के तौर पर, Deck.gl का इस्तेमाल करें.

npm i @deck.gl/google-maps

टेस्टिंग और लिंटिंग

सबसे सही तरीके पक्का करने और Maps JavaScript API की जांच को आसान बनाने के लिए, इन लाइब्रेरी का इस्तेमाल करें.

अपने कोड को लिंट करने के लिए, पसंद के मुताबिक बनाए गए ESLint नियमों का इस्तेमाल करें.

npm i -D eslint-plugin-googlemaps

Jest टेस्टिंग लाइब्रेरी के साथ इस्तेमाल करने के लिए मॉक.

npm i -D @googlemaps/jest-mocks

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