시작하기

이 튜토리얼에서는 Maps JavaScript에서 실사 3D 지도를 사용하여 첫 번째 JavaScript 애플리케이션을 만드는 과정을 안내합니다. 이 기본 창은 Marin Headlands를 배경으로 골든게이트교의 오버헤드 뷰를 표시하는 기본 창입니다.

튜토리얼을 완료하면 개발 환경에 다음 맵이 표시됩니다.

환경 설정

코드 작성을 시작하기 전에 JavaScript를 실행하는 환경을 설정해야 합니다. 이 튜토리얼에서는 웹브라우저를 환경으로 사용합니다. 모든 최신 웹브라우저에는 JavaScript 지원 기능이 내장되어 있으므로 추가 소프트웨어를 설치할 필요가 없습니다.

  1. 원하는 텍스트 편집기를 엽니다.
  2. 새 파일을 만들고 .html 확장자 (예: hello-p3djs.html))를 제공합니다.

HTML 페이지 작성

먼저 기본 HTML 구조로 웹페이지를 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

JavaScript 추가

다음으로 맞춤 HTML 요소를 추가하여 지도를 로드합니다. 코드에는 다음 두 가지 요소가 포함되어 있습니다.

  • gmp-map-3d에는 시작 카메라 위치와 뷰를 초기화하는 데 사용되는 매개변수가 포함됩니다.
  • script에는 Maps JavaScript API를 로드하는 호출이 포함됩니다. YOUR_KEY를 API 키로 바꾸세요.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

애플리케이션 실행

애플리케이션을 실행하고 출력을 확인하려면 다음 단계를 따르세요.

  1. 생성한 HTML 파일을 저장합니다.
  2. 웹브라우저에서 파일을 엽니다. 파일을 더블클릭하거나 브라우저 창으로 드래그하거나 마우스 오른쪽 버튼으로 클릭하여 '연결 프로그램'을 사용합니다.
  3. 브라우저 창에 지도가 표시됩니다.

축하합니다. 이제 Maps JavaScript API에서 Google의 실사 3D 지도를 사용하여 애플리케이션을 작성했습니다.

다음 단계

  • Google의 기존 샘플을 사용하여 더 복잡한 3D 지도 환경을 빌드합니다.
  • 참조 문서에서 Maps JavaScript API의 실사 3D 지도의 모든 기능을 알아보세요.