이 튜토리얼에서는 지도 JavaScript에서 실사 3D 지도를 사용하여 첫 번째 JavaScript 프로그램을 만드는 방법을 알아봅니다. 이 간단한 창에서는 마린 헤드랜즈가 보이는 금문교의 오버헤드 뷰를 표시합니다.
가이드를 완료하면 개발 환경에 다음과 같은 지도가 표시됩니다.
환경 설정하기
코드 작성을 시작하기 전에 JavaScript를 실행하는 환경을 설정해야 합니다. 이 튜토리얼에서는 웹브라우저를 환경으로 사용합니다. 모든 최신 웹브라우저는 자바스크립트 지원 기능이 내장되어 있으므로 추가 소프트웨어를 설치할 필요가 없습니다.
- 원하는 텍스트 편집기를 엽니다.
- 새 파일을 만들고
.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 코드를 추가합니다. 코드에는 다음 두 요소가 포함됩니다.
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 center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
프로그램 실행
프로그램을 실행하고 출력을 보려면 다음 단계를 따르세요.
- 생성한 HTML 파일을 저장합니다.
- 웹브라우저에서 파일을 엽니다. 파일을 더블클릭하거나 브라우저 창으로 드래그하거나 마우스 오른쪽 버튼으로 클릭하여 '연결 프로그램'을 사용할 수 있습니다.
- 브라우저 창에 지도가 표시됩니다.
개업을 축하합니다. 지금까지 Google의 Maps JavaScript API 실사 3D 지도를 사용하여 프로그램을 작성했습니다.