在本教學課程中，您將透過逐步操作，使用 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 地圖編寫了程式。