संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
Maps JavaScript API के लिए, कई ओपन सोर्स लाइब्रेरी उपलब्ध हैं. इनसे अतिरिक्त सुविधाएं मिलती हैं. इन लाइब्रेरी के वर्शन, GitHub पर उपलब्ध हैं. साथ ही, इन्हें npm पर पब्लिश किया गया है.
वेब कॉम्पोनेंट
अपनी वेबसाइटों में मैप की सुविधा तुरंत जोड़ने के लिए, Maps JavaScript API के वेब कॉम्पोनेंट का इस्तेमाल करें. वेब कॉम्पोनेंट में, छोटे-मोटे बदलाव वाले कोड, सबसे सही तरीके, और रिस्पॉन्सिव डिज़ाइन शामिल होते हैं. इससे मैप के जटिल यूज़र इंटरफ़ेस (यूआई) को एक ही एचटीएमएल एलिमेंट में बदला जा सकता है.
Google Maps Platform की Extended Component Library, वेब कॉम्पोनेंट का एक सेट है. इससे डेवलपर को कम समय में, कम मेहनत करके बेहतर मैप बनाने में मदद मिलती है.
npm i @googlemaps/extended-component-library
एपीआई लोड करना
आधुनिक वेब ऐप्लिकेशन, Maps JavaScript API को लोड करने के लिए यहां दी गई लाइब्रेरी का इस्तेमाल कर सकते हैं.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-08-17 (UTC) को अपडेट किया गया."],[[["\u003cp\u003eThe Google Maps Platform offers numerous open-source libraries hosted on GitHub and npm to enhance the functionality of the Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eThese libraries cater to various needs, including web components, API loading, TypeScript integration, React integration, marker and overlay extensions, testing, linting, and Node.js environments.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can leverage libraries such as the Extended Component Library for streamlined UI development and the JS API Loader for dynamic API loading.\u003c/p\u003e\n"],["\u003cp\u003eDedicated libraries are available for specific frameworks like React and TypeScript, along with tools for testing, linting, and extending map functionalities with markers, clusters, and overlays.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Maps Platform provides Node.js libraries for server-side operations, such as making API calls and URL signing.\u003c/p\u003e\n"]]],["Open-source libraries enhance the Maps JavaScript API, available on GitHub and npm. Web Components simplify map integration via a component library, installable with `npm i @googlemaps/extended-component-library`. The API can be dynamically loaded using `npm i @googlemaps/js-api-loader`. TypeScript support includes types and guards (`npm i -D @types/google.maps`, `npm i -D @googlemaps/typescript-guards`). React users can integrate maps using `@vis.gl/react-google-maps` or `@googlemaps/react-wrapper`. Libraries extend markers, overlays, and there are tools for linting, testing, and Node.js functionality.\n"],null,["Many open source libraries are available to provide additional capabilities for\nMaps JavaScript API. These libraries are versioned on\n[GitHub](https://github.com/googlemaps) and published to\n[npm](https://www.npmjs.com/).\n\nWeb Components\n\nUse [Maps JavaScript API Web\nComponents](/maps/documentation/web-components) to quickly add maps\nfunctionality to your websites. Web Components encapsulate boilerplate code,\nbest practices, and responsive design, reducing complex map UIs into what is\neffectively a single HTML element. \n[Extended Component Library (Beta)](https://github.com/googlemaps/extended-component-library \"GitHub repository for @googlemaps/extended-component-library\")\n\nGoogle Maps Platform Extended Component\nLibrary is a set of Web Components that helps developers build better maps\nfaster, and with less effort. \n\n```\nnpm i @googlemaps/extended-component-library\n``` \n[](https://www.npmjs.com/package/@googlemaps/extended-component-library \"NPM registry listing for @googlemaps/extended-component-library\") [](https://github.com/googlemaps/extended-component-library \"GitHub repository for @googlemaps/extended-component-library\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nLoading the API\n\nModern web applications may benefit from using the following libraries to load the Maps JavaScript API. \n[JS API loader](https://github.com/googlemaps/js-api-loader \"GitHub repository for @googlemaps/js-api-loader\")\n\nDynamically load the Maps JavaScript API with Promises. \n\n```\nnpm i @googlemaps/js-api-loader\n``` \n[](https://www.npmjs.com/package/@googlemaps/js-api-loader \"NPM registry listing for @googlemaps/js-api-loader\") [](https://github.com/googlemaps/js-api-loader \"GitHub repository for @googlemaps/js-api-loader\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nUsing TypeScript\n\nTypeScript users can get started with the following packages. Check out the [using TypeScript guide](./using-typescript) for additional information. \n[TypeScript types](https://github.com/definitelytyped/definitelytyped \"GitHub repository for @types/google.maps\")\n\nTypeScript types for Maps JavaScript API \n\n```\nnpm i -D @types/google.maps\n``` \n[](https://www.npmjs.com/package/@types/google.maps \"NPM registry listing for @types/google.maps\") [](https://github.com/definitelytyped/definitelytyped \"GitHub repository for @types/google.maps\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[TypeScript guards](https://github.com/googlemaps/js-typescript-guards \"GitHub repository for @googlemaps/typescript-guards\")\n\nTypeScript guards to narrow union types. \n\n```\nnpm i -D @googlemaps/typescript-guards\n``` \n[](https://www.npmjs.com/package/@googlemaps/typescript-guards \"NPM registry listing for @googlemaps/typescript-guards\") [](https://github.com/googlemaps/js-typescript-guards \"GitHub repository for @googlemaps/typescript-guards\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nUsing React\n\nReact users can get started with the following packages. \n[React Google Maps Library](https://github.com/visgl/react-google-maps \"GitHub repository for @vis.gl/react-google-maps\")\n\nComponents and hooks to integrate the Maps JavaScript API into React applications. \n\n```\nnpm i -D @vis.gl/react-google-maps\n``` \n[](https://www.npmjs.com/package/@vis.gl/react-google-maps \"NPM registry listing for @vis.gl/react-google-maps\") [](https://github.com/visgl/react-google-maps \"GitHub repository for @vis.gl/react-google-maps\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[React wrapper](https://github.com/googlemaps/react-wrapper \"GitHub repository for @googlemaps/react-wrapper\")\n\nA wrapper component to declaratively load the Maps JavaScript API. \n\n```\nnpm i @googlemaps/react-wrapper\n``` \n[](https://www.npmjs.com/package/@googlemaps/react-wrapper \"NPM registry listing for @googlemaps/react-wrapper\") [](https://github.com/googlemaps/react-wrapper \"GitHub repository for @googlemaps/react-wrapper\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nExtending markers and overlays\n\nThe following libraries extend classes such as Marker and OverlayView. \n[Marker clusterer](https://github.com/googlemaps/js-markerclusterer \"GitHub repository for @googlemaps/markerclusterer\")\n\nCreates and manages per-zoom-level clusters for large amounts of markers. \n\n```\nnpm i @googlemaps/markerclusterer\n``` \n[](https://www.npmjs.com/package/@googlemaps/markerclusterer \"NPM registry listing for @googlemaps/markerclusterer\") [](https://github.com/googlemaps/js-markerclusterer \"GitHub repository for @googlemaps/markerclusterer\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Marker manager](https://github.com/googlemaps/js-markermanager \"GitHub repository for @googlemaps/markermanager\")\n\nAdds and removes markers based upon map viewport changes. \n\n```\nnpm i @googlemaps/markermanager\n``` \n[](https://www.npmjs.com/package/@googlemaps/markermanager \"NPM registry listing for @googlemaps/markermanager\") [](https://github.com/googlemaps/js-markermanager \"GitHub repository for @googlemaps/markermanager\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Web map service (WMS)](https://github.com/googlemaps/js-ogc \"GitHub repository for @googlemaps/ogc\")\n\nAdd Open Geospatial Consortium (OGC) layers such as a Web Map Service (WMS) to a map. \n\n```\nnpm i @googlemaps/ogc\n``` \n[](https://www.npmjs.com/package/@googlemaps/ogc \"NPM registry listing for @googlemaps/ogc\") [](https://github.com/googlemaps/js-ogc \"GitHub repository for @googlemaps/ogc\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Marker labels](https://github.com/googlemaps/js-markerwithlabel \"GitHub repository for @googlemaps/markerwithlabel\")\n\nAdd custom HTML labels to markers. \n\n```\nnpm i @googlemaps/markerwithlabel\n``` \n[](https://www.npmjs.com/package/@googlemaps/markerwithlabel \"NPM registry listing for @googlemaps/markerwithlabel\") [](https://github.com/googlemaps/js-markerwithlabel \"GitHub repository for @googlemaps/markerwithlabel\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Three.js overlays](https://github.com/googlemaps/js-three \"GitHub repository for @googlemaps/three\")\n\nUse WebGL and ThreeJS for high performance visualizations. \n\n```\nnpm i @googlemaps/three\n``` \n[](https://www.npmjs.com/package/@googlemaps/three \"NPM registry listing for @googlemaps/three\") [](https://github.com/googlemaps/js-three \"GitHub repository for @googlemaps/three\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Deck.gl overlays](https://github.com/visgl/deck.gl \"GitHub repository for @deck.gl/google-maps\")\n\nUse Deck.gl as a custom Google Maps overlay. \n\n```\nnpm i @deck.gl/google-maps\n``` \n[](https://www.npmjs.com/package/@deck.gl/google-maps \"NPM registry listing for @deck.gl/google-maps\") [](https://github.com/visgl/deck.gl \"GitHub repository for @deck.gl/google-maps\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nTesting and linting\n\nUse these libraries to ensure best practices and make testing easier for the Maps JavaScript API. \n[ESLint plugin](https://github.com/googlemaps/eslint-plugin-googlemaps \"GitHub repository for eslint-plugin-googlemaps\")\n\nUse custom ESLint rules to lint your code. \n\n```\nnpm i -D eslint-plugin-googlemaps\n``` \n[](https://www.npmjs.com/package/eslint-plugin-googlemaps \"NPM registry listing for eslint-plugin-googlemaps\") [](https://github.com/googlemaps/eslint-plugin-googlemaps \"GitHub repository for eslint-plugin-googlemaps\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Jest mocks](https://github.com/googlemaps/js-jest-mocks \"GitHub repository for @googlemaps/jest-mocks\")\n\nMocks to use with the Jest testing library. \n\n```\nnpm i -D @googlemaps/jest-mocks\n``` \n[](https://www.npmjs.com/package/@googlemaps/jest-mocks \"NPM registry listing for @googlemaps/jest-mocks\") [](https://github.com/googlemaps/js-jest-mocks \"GitHub repository for @googlemaps/jest-mocks\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")\n\nNode.js Libraries **Note:** The following libraries **do not work in browser environments** and are implemented for Node.js and server environments. \n[Node.js client library](https://github.com/googlemaps/google-maps-services-js \"GitHub repository for @googlemaps/google-maps-services-js\")\n\nNode.js client library for making calls from cloud functions or serverside code. \n\n```\nnpm i @googlemaps/google-maps-services-js\n``` \n[](https://www.npmjs.com/package/@googlemaps/google-maps-services-js \"NPM registry listing for @googlemaps/google-maps-services-js\") [](https://github.com/googlemaps/google-maps-services-js \"GitHub repository for @googlemaps/google-maps-services-js\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[Polyline encoding](https://github.com/googlemaps/js-polyline-codec \"GitHub repository for @googlemaps/polyline-codec\")\n\nEncode and decode polylines in Node.js. \n\n```\nnpm i @googlemaps/polyline-codec\n``` \n[](https://www.npmjs.com/package/@googlemaps/polyline-codec \"NPM registry listing for @googlemaps/polyline-codec\") [](https://github.com/googlemaps/js-polyline-codec \"GitHub repository for @googlemaps/polyline-codec\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\") \n[URL signing](https://github.com/googlemaps/js-url-signature \"GitHub repository for @googlemaps/url-signature\")\n\nSign URLs in Node.js for additional security. \n\n```\nnpm i @googlemaps/url-signature\n``` \n[](https://www.npmjs.com/package/@googlemaps/url-signature \"NPM registry listing for @googlemaps/url-signature\") [](https://github.com/googlemaps/js-url-signature \"GitHub repository for @googlemaps/url-signature\") [](https://discord.gg/jRteCzP \"Discuss this library with developers\")"]]
