시작하기

플랫폼 선택: Android iOS JavaScript

이 튜토리얼에서는 Maps JavaScript의 3D 지도를 사용하여 첫 번째 JavaScript 애플리케이션을 만드는 방법을 안내합니다. 이 애플리케이션은 배경의 마린 헤드랜드와 함께 골든 게이트 브리지의 조감도를 표시하는 기본 창입니다.

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

환경 설정

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

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

HTML 페이지 작성

먼저 기본 HTML 구조로 웹페이지를 만듭니다.

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

JavaScript 추가

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

  • gmp-map-3d 에는 시작 카메라 위치와 뷰를 초기화하는 데 사용되는 매개변수가 포함되어 있습니다.
  • script에는 Maps JavaScript API를 로드하는 호출이 포함되어 있습니다. YOUR_KEY를 API 키로 바꿔야 합니다.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

애플리케이션 실행

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

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

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

다음 단계

  • Google의 기존 샘플을 사용하여 더 복잡한 3D 지도 환경을 빌드합니다.
  • 참고 문서를 읽고 Maps JavaScript API의 3D 지도의 잠재력을 최대한 활용합니다.