Maps JavaScript API

세부적인 맞춤설정이 가능한 대화형 동적 지도, 위치, 지리정보 환경을 웹 앱에 구축하세요.

시작하기

Maps JavaScript API의 일반적인 기능을 사용하여 지도 작성을 시작합니다.
Google Maps Platform 시작 가이드에 따라 계정을 만들고, API 키를 생성하고, 빌드를 시작합니다.
Maps JavaScript API를 로드하고 마커가 있는 지도를 웹 앱에 추가하는 방법을 알아봅니다.
Maps JavaScript API를 사용하여 3D 지도를 만드는 방법을 알아봅니다.
도로, 지형 지물, 관심 장소 등 지도의 모든 측면을 맞춤설정합니다.
사용자가 마커를 클릭하면 추가 정보와 컨텍스트가 포함된 정보 창을 표시합니다.

특성

Maps JavaScript API의 핵심 기능에 관한 문서를 둘러봅니다.
도로, 위성, 하이브리드, 지형, 맞춤 지도를 표시합니다.
지도의 텍스트를 40개 이상의 언어로 자동 현지화합니다.
기본 Google 지도 마커를 표시하거나 나만의 맞춤 스타일 마커를 추가합니다.
지도에 표시되는 UI 컨트롤을 맞춤설정합니다.
사용자 상호작용 및 수명 주기 이벤트에 반응하는 코드를 작성합니다.
WebGL의 기능을 활용하여 벡터 기본 지도에 풍부한 3D 및 2D 경험을 구축합니다.
대화형 정보 창을 사용하여 마커에 향상된 컨텍스트와 정보를 추가합니다.
기본 제공 함수를 사용하여 지도에 다중선, 다각형 등 다양한 도형을 그립니다.
지도에 데이터, 이미지 등을 표시하는 맞춤 오버레이를 만듭니다.
이동하거나 확대/축소할 때 지도와 동기화된 상태로 유지하는 맞춤 이미지를 오버레이합니다.
지도에 GeoJSON 및 기타 데이터 유형을 다양한 형식으로 표시합니다.
지도의 거의 모든 시각적인 측면에 맞춤 모양 스타일을 지정합니다.
벡터 기본 지도를 프로그래매틱 방식을 통해 3차원적으로 기울이거나 회전합니다.
수많은 마커를 그룹화하여 깔끔한 사용자 환경을 조성합니다.
지리적 위치에서 데이터의 밀도를 시각화합니다.

라이브러리

Maps JS API를 로드하여 확장 기능을 추가할 때 선택적 라이브러리를 부트스트랩합니다.
Maps JS API를 로드할 때 사용 가능한 라이브러리를 부트스트랩하는 방법을 알아봅니다.
사용자에게 지도에 그릴 수 있는 대화형 기능을 제공합니다.
지표면의 도형 데이터를 계산하는 유틸리티 함수를 사용합니다.
주변 장소를 검색하고, Place Autocomplete를 사용 설정하고, 장소 세부정보 및 사진을 검색합니다.
사진 갤러리로 구성된 장소 선택기가 포함된 대화형 지도를 추가합니다.
히트맵을 사용하여 지리적 위치의 데이터 강도를 시각화합니다.

서비스

기본 제공 데이터 서비스를 사용하여 웹 앱의 기능을 강화합니다.
지도에서 두 지점 간의 경로 및 최대 25개의 경유지를 찾습니다.
출발지와 목적지 행렬에 대한 이동 거리와 시간을 가져옵니다.
해저를 포함하여 지표면의 위치 고도를 가져옵니다.
주소 또는 장소 ID를 좌표로 변환하거나 그 반대로 변환합니다.
특정 위치에서 사용 가능한 이미지의 최대 확대/축소 수준을 쿼리합니다.
웹 앱에 360도 스트리트 뷰 이미지를 추가하거나 자신만의 이미지를 업로드합니다.

예시 앱

로컬 컴퓨터와 즐겨 사용하는 코드 플레이그라운드에서 라이브 코드 샘플을 실행합니다.
장소 라이브러리를 사용하여 주변 장소를 검색합니다.
맞춤 지도 스타일 지정을 사용하여 웹 앱에 어두운 모드 지도를 추가합니다.
지도의 마커 아이콘을 맞춤 이미지로 변경합니다.
지도에서 사용자가 이동 및 확대/축소할 때 동기화 상태를 유지하는 풍부한 오버레이를 만듭니다.
풍부한 지도 오버레이에 실시간 교통정보를 표시합니다.
벡터 지도를 프로그래매틱 방식을 통해 3차원적으로 기울이거나 회전합니다.
예시 앱 더보기

도움말 및 지원

도움을 주고받을 수 있는 커뮤니티에 가입하세요.

도움을 주고받으며 더 멋진 지도를 만들어 보세요.

버그를 신고하거나 기능 요청을 여세요.

플랫폼 이슈 및 서비스 중단에 대해 알아보세요.

Google Maps Platform팀의 도움을 받으세요.