오픈소스 라이브러리

여러 오픈소스 라이브러리를 사용하여 Maps JavaScript API를 위한 추가 기능을 제공할 수 있습니다. 이러한 라이브러리는 GitHub에서 버전이 관리되고 npm에 게시됩니다.

웹 구성요소

Maps JavaScript API 웹 구성요소를 사용하여 웹사이트에 지도 기능을 빠르게 추가할 수 있습니다. 웹 구성요소는 상용구 코드, 권장사항, 반응형 디자인을 캡슐화하여 복잡한 지도 UI를 단일 HTML 요소로 바꿉니다.

확장 구성요소 라이브러리(베타)

Google Maps Platform 확장 구성요소 라이브러리는 개발자가 더 나은 지도를 더 쉽고 빠르게 빌드하는 데 도움이 되는 웹 구성요소 모음입니다.

npm i @googlemaps/extended-component-library

API 로드

최신 웹 애플리케이션에서는 다음과 같은 라이브러리를 사용하여 Maps JavaScript API를 로드할 수 있습니다.

JS API 로더

프로미스를 사용하여 Maps JavaScript API를 동적으로 로드합니다.

npm i @googlemaps/js-api-loader

Using 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 JavaScript API를 React 애플리케이션으로 통합하기 위한 구성요소 및 후크입니다.

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

React 래퍼

Maps JavaScript API를 선언적으로 로드하는 래퍼 구성요소입니다.

npm i @googlemaps/react-wrapper

마커 및 오버레이 확장

다음 라이브러리는 Marker 및 OverlayView와 같은 클래스를 확장합니다.

마커 클러스터

많은 양의 마커를 위해 확대/축소 수준별로 클러스터를 만들고 관리합니다.

npm i @googlemaps/markerclusterer

마커 관리자

지도 표시 영역 변경사항을 기반으로 마커를 추가하고 삭제합니다.

npm i @googlemaps/markermanager

웹 지도 서비스(WMS)

웹 지도 서비스(WMS)와 같은 OGC(Open Geospatial Consortium) 레이어를 지도에 추가합니다.

npm i @googlemaps/ogc

마커 라벨

마커에 맞춤 HTML 라벨을 추가합니다.

npm i @googlemaps/markerwithlabel

Three.js 오버레이

고성능 시각화를 위해 WebGL 및 ThreeJS를 사용합니다.

npm i @googlemaps/three

Deck.gl 오버레이

Deck.gl을 맞춤 Google 지도 오버레이로 사용합니다.

npm i @deck.gl/google-maps

테스트 및 린트 작업

이러한 라이브러리를 사용해 권장사항을 적용하고 Maps JavaScript API를 더 쉽게 테스트할 수 있습니다.

ESLint 플러그인

맞춤 ESLint 규칙을 사용하여 코드를 린트합니다.

npm i -D eslint-plugin-googlemaps

Jest 모의 스크린샷

Jest 테스트 라이브러리와 함께 사용할 모의 스크린샷

npm i -D @googlemaps/jest-mocks

Node.js 라이브러리

참고: 다음 라이브러리는 브라우저 환경에서는 작동하지 않으며 Node.js 및 서버 환경을 위해 구현됩니다.

Node.js 클라이언트 라이브러리

클라우드 함수 또는 서버 측 코드에서 호출을 하기 위한 Node.js 클라이언트 라이브러리

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

다중선 인코딩

Node.js에서 다중선을 인코딩하고 디코딩합니다.

npm i @googlemaps/polyline-codec

URL 서명

추가 보안을 위해 Node.js에서 URL에 서명합니다.

npm i @googlemaps/url-signature