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

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

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

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

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

npm i @googlemaps/extended-component-library
@googlemaps/extended-component-library के लिए NPM वर्शन @googlemaps/extended-component-library के लिए एनपीएम डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

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

प्रॉमिस के साथ Maps JavaScript API को डाइनैमिक तरीके से लोड करें.

npm i @googlemaps/js-api-loader
@googlemaps/js-api-loader के लिए NPM वर्शन @googlemaps/js-api-loader के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

TypeScript का इस्तेमाल करना

TypeScript के उपयोगकर्ता इन पैकेज का इस्तेमाल शुरू कर सकते हैं. अतिरिक्त जानकारी के लिए TypeScript गाइड का इस्तेमाल करना देखें.

Maps JavaScript API के लिए TypeScript के टाइप

npm i -D @types/google.maps
@types/google.maps के लिए NPM वर्शन @types/google.maps के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

TypeScript, नैरो यूनियन टाइप को गार्ड करता है.

npm i -D @googlemaps/typescript-guards
@googlemaps/typescript-Guards के लिए NPM वर्शन @googlemaps/typescript-Guards के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

React का इस्तेमाल करना

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

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

npm i -D @vis.gl/react-google-maps
@vis.gl/react-google-maps के लिए NPM वर्शन @vis.gl/react-google-maps के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/react-wrapper
@googlemaps/react-wrapper के लिए NPM वर्शन @googlemaps/react-wrapper के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

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

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

npm i @googlemaps/markerclusterer
@googlemaps/markerclusterer के लिए NPM वर्शन @googlemaps/markerclusterer के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/markermanager
@googlemaps/markermanager के लिए NPM वर्शन @googlemaps/markermanager के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/ogc
@googlemaps/ogc के लिए NPM वर्शन @googlemaps/ogc के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/markerwithlabel
@googlemaps/markerwithlabel के लिए NPM वर्शन @googlemaps/markerwithlabel के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/three
@googlemaps/three के लिए NPM वर्शन @googlemaps/three के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @deck.gl/google-maps
@deck.gl/google-maps के लिए NPM वर्शन @deck.gl/google-maps के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

लिंटिंग और लिंटिंग की जांच करना

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

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

npm i -D eslint-plugin-googlemaps
एस्लिंट-प्लग इन-googlemaps के लिए NPM वर्शन एस्लिंट-प्लगिन-googlemaps के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i -D @googlemaps/jest-mocks
@googlemaps/jest-mocks के लिए NPM वर्शन @googlemaps/jest-mocks के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

Node.js क्लाइंट लाइब्रेरी का इस्तेमाल, क्लाउड फ़ंक्शन या सर्वर साइड कोड से कॉल करने के लिए किया जाता है.

npm i @googlemaps/google-maps-services-js
@googlemaps/google-maps-services-js के लिए NPM वर्शन @googlemaps/google-maps-services-js के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/polyline-codec
@googlemaps/polyline-codec के लिए एनपीएम वर्शन @googlemaps/polyline-codec के लिए एनपीएम डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज

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

npm i @googlemaps/url-signature
@googlemaps/url-signature के लिए NPM वर्शन @googlemaps/url-signature के लिए NPM डाउनलोड GitHub रेपो स्टार GitHub कमिट ऐक्टिविटी (शाखा) GitHub फ़ोर्क Discord सर्वर का बैज