在這個教學課程中，您將透過 Maps JavaScript 中的擬真成像 3D 地圖，逐步建立第一個 JavaScript 程式。這個簡單的視窗會顯示金門大橋的俯視圖，背景是 Marin Headlands。
完成教學課程後，您的開發環境中應該會顯示以下地圖：
設定環境
在開始編寫程式碼之前，您必須先設定執行 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" 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 地圖撰寫程式。