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

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

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

अपनी वेबसाइटों में Maps की सुविधाओं को तुरंत जोड़ने के लिए, 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 का इस्तेमाल करना

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

React Google Maps लाइब्रेरी

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

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

React रैपर

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

npm i @googlemaps/react-wrapper

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

यहां दी गई लाइब्रेरी, मार्कर और ओवरले व्यू जैसी क्लास को एक्सटेंड करती हैं.

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

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

npm i @googlemaps/markerclusterer

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

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

npm i @googlemaps/markermanager

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

मैप में वेब मैप सेवा (WMS) जैसी Open Geospatial Consortium (OGC) लेयर जोड़ें.

npm i @googlemaps/ogc

मार्कर लेबल

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

npm i @googlemaps/markerwithlabel

Three.js ओवरले

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

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 क्लाइंट लाइब्रेरी

Cloud Functions या सर्वर साइड कोड से कॉल करने के लिए, Node.js क्लाइंट लाइब्रेरी.

npm i @googlemaps/google-maps-services-js

पॉलीलाइन एन्कोडिंग

Node.js में पॉलीलाइन को कोड में बदलना और डीकोड करना.

npm i @googlemaps/polyline-codec

यूआरएल को साइन करना

ज़्यादा सुरक्षा के लिए, Node.js में यूआरएल साइन करें.

npm i @googlemaps/url-signature