오픈소스 라이브러리

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

웹 구성요소

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

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

npm i @googlemaps/extended-component-library
@googlemaps/extended-component-library용 NPM 버전 @googlemaps/extended-component-library용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

API 로드

최신 웹 애플리케이션에서는 다음과 같은 라이브러리를 사용하여 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 서버 배지

Using 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 사용

React 사용자는 다음 패키지를 사용하여 시작할 수 있습니다.

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

npm i @googlemaps/react-wrapper
@googlemaps/react-wrapper용 NPM 버전 @googlemaps/react-wrapper용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

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 서버 배지

마커 및 오버레이 확장

다음 라이브러리는 Marker 및 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 서버 배지

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

npm i @googlemaps/ogc
@googlemaps/ogc용 NPM 버전 @googlemaps/ogc용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

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

npm i @googlemaps/markerwithlabel
@googlemaps/markerwithlabel용 NPM 버전 @googlemaps/markerwithlabel용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

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

npm i @googlemaps/three
@googlemaps/three용 NPM 버전 @googlemaps/three용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

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

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
eslint-plugin-googlemaps용 NPM 버전 eslint-plugin-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용 NPM 버전 @googlemaps/polyline-codec용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지

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

npm i @googlemaps/url-signature
@googlemaps/url-signature용 NPM 버전 @googlemaps/url-signature용 NPM 다운로드 GitHub 저장소 별표 GitHub 커밋 활동(브랜치) GitHub 포크 Discord 서버 배지