在本教學課程中，您將使用 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" 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 地圖編寫程式。