在這個教學課程中，您會引導自己在 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
接下來，您必須加入自訂 HTML 元素來載入地圖。程式碼包含兩個元素：
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 mode="hybrid" 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=beta&libraries=maps3d"></script>
</body>
</html>
執行應用程式
如要執行應用程式並查看輸出內容，請按照下列步驟操作：
- 儲存您建立的 HTML 檔案。
- 在網路瀏覽器中開啟檔案 (您可以在檔案上按兩下、拖曳至瀏覽器視窗，或是按一下滑鼠右鍵並使用「選擇開啟工具」)。
- 您應該會在瀏覽器視窗中看見地圖。
恭喜！您剛使用 Maps JavaScript API 的 Google 擬真成像 3D 地圖編寫應用程式，