[[["이해하기 쉬움","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\")"]]
