在這個教學課程中，您將透過 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" 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 地圖編寫了程式。