개요

플랫폼 선택: Android iOS JavaScript

Maps JavaScript의 3D 지도를 사용하면 몰입감 있는 3D 지도 환경을 만들 수 있습니다. 지도 스타일을 맞춤설정하고, 접근성을 개선하고, 사용성을 향상하는 도구를 제공하여 매력적인 대화형 애플리케이션을 개발할 수 있습니다.

Maps JavaScript API의 3D 지도로 할 수 있는 작업의 예시는 다음과 같습니다.

Maps JavaScript에서 3D 지도를 사용하는 이유

지도 JavaScript의 3D 지도는 maps3d 라이브러리에 Map3DElement(<gmp-map-3d>) 클래스를 제공하므로 애플리케이션에서 Google의 3D 이미지를 사용할 수 있습니다. 3D 지도는 기본 제공되는 3D 렌더링 환경을 제공하므로 3D 실제 환경, 도시 뷰, 명소 투어를 통합하거나 실험할 수 있습니다.

3D 지형, 카메라 기울기, 방향, 범위 플라이오버, 돌출된 3D 빌딩, Marker3DElement(<gmp-marker-3d>)과 같은 3D 객체에는 3D <gmp-map-3d>(maps3d 라이브러리의 Map3DElement)를 사용합니다. 평면 2D 도로 지도, 표준 2D AdvancedMarkerElement 핀, 2D 벡터 스타일 지정에는 2D <gmp-map>(maps 라이브러리의 MapElement 또는 google.maps.Map)를 사용합니다.

Maps JavaScript의 3D 지도로 무엇을 할 수 있나요?

• 실제 지도 환경 만들기: SATELLITE 또는 HYBRID 모드(위성 이미지에 기본 지도 라벨을 오버레이함)에서 도시, 지형, 명소의 포토리얼리스틱 3D 항공 이미지를 렌더링하거나 mode 속성을 사용하여 ROADMAP 모드에서 스타일이 지정된 3D 기본 지도를 표시합니다. 자세한 내용은 지도 모드 변경을 참고하세요.
• 지도의 스타일 맞춤설정:
  • 3D 클라우드 기반 지도 스타일 지정: 기본 지도 관심 장소 (POI) 및 도로의 공개 상태와 스타일을 제어합니다. 자세한 내용은 3D 지도 맞춤설정을 참고하세요.
  • 맞춤 마커, 팝오버, 다중선, 다각형: MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement, Polygon3DElement를 사용하여 위치를 식별하고 지도에 3D 경로 또는 경계를 그립니다. 자세한 내용은 마커, 팝오버, 도형 및 선을 참고하세요.
  • 3D 모델 및 glTF 애셋: Model3DElement를 사용하여 실제 좌표에 건물, 명소 또는 객체의 맞춤 PBR glTF 3D 모델을 추가합니다. 자세한 내용은 모델을 참조하세요.
• 몰입형 지도 빌드:
  • 사전 설정된 카메라 경로: flyCameraTo 및 flyCameraAround를 사용하여 사전 정의된 카메라 플라이오버 및 궤도 애니메이션으로 3D 지도를 통해 사용자를 안내합니다. 자세한 내용은 카메라 경로 애니메이션을 참고하세요.
  • 사용자 상호작용 제어: 사용자가 사용할 수 있는 컨트롤과 카메라 움직임을 맞춤설정합니다. 자세한 내용은 3D 지도 컨트롤 및 탐색, 카메라 뷰 및 경계 제한, 카메라 위치 제어를 참고하세요.

간단한 예시

maps3d 라이브러리를 로드하고 mode="HYBRID", center(lat,lng,altitude), range, tilt, heading를 사용하여 <gmp-map-3d> 요소를 렌더링하려면 다음 스니펫을 사용하세요.

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

YOUR_API_KEY를 Google Maps Platform API 키로 바꿉니다.

Maps JavaScript에서 3D 지도를 사용하는 방법

1	설정하기	JavaScript API 설정부터 시작하여 설정 안내를 완료합니다.
2	Maps JavaScript API 요금 청구 방식 이해하기	자세한 내용은 사용량 및 결제를 참고하세요.
3	지도 만들기	자세한 내용은 시작하기를 참조하세요.

적용 범위

포토리얼리스틱 3D 빌딩 및 명소 메시는 지원되는 국가 및 지역의 일부 대도시 지역에서 사용할 수 있습니다. 3D 메시 적용 범위가 없는 지역(예: 인도)에서는 <gmp-map-3d>가 돌출된 3D 빌딩 없이 3D 지형 고도 위에 드레이프된 2D 위성 또는 로드맵 이미지를 렌더링합니다. 3D 메시 적용 범위가 없는 지역의 명소를 표시하려면 Model3DElement를 사용하여 좌표에 맞춤 glTF 3D 모델을 배치하거나 2D <gmp-map>를 사용하면 됩니다. 국가별 사용 가능 여부(Maps JavaScript 3D 열 아래)는 Google Maps Platform 사용 범위 세부정보를 참고하세요.

다음 단계

• 'Hello, World!' 3D 지도를 빌드하는 방법에 대한 시작하기 가이드를 확인해 보세요.
• 지도에 기능을 추가하는 방법을 알아보려면 소개 Codelab을 사용해 보세요.
• 다음 Codelab에서 마커 및 애니메이션에 관한 지식을 넓히세요.
• Google에서 제공하는 샘플 모음에서 사용 사례에 적합한 샘플을 찾아보세요.