이 튜토리얼에서는 Maps JavaScript의 포토리얼리스틱 3D 지도를 사용하여 첫 번째 JavaScript 프로그램을 만드는 방법을 안내합니다. 이 프로그램은 마린 헤드랜드가 배경에 있는 골든게이트 브리지의 상공 조감도를 표시하는 간단한 창입니다.
튜토리얼을 완료하면 개발 환경에 다음 지도와 같이 표시됩니다.
환경 설정
코드 작성을 시작하기 전에 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 추가
다음으로 지도 로드용 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" range="2000" tilt="75" heading="330"></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 지도를 사용하여 프로그램을 작성했습니다.