谷歌地圖 - 入門指南

什麼是谷歌地圖？

谷歌地圖是谷歌提供的一項免費網路地圖服務，提供各種地理資訊。使用谷歌地圖，您可以：

搜尋地點或獲取從一個地點到另一個地點的行車路線。
檢視和瀏覽世界各地不同城市的水平和垂直全景街道影像。
獲取特定資訊，例如特定地點的交通狀況。

谷歌地圖提供了一個API，您可以使用它來定製地圖和地圖上顯示的資訊。本章解釋如何使用HTML和JavaScript在您的網頁上載入一個簡單的谷歌地圖。

在網頁上載入地圖的步驟

按照以下步驟在您的網頁上載入地圖：

步驟1：建立HTML頁面

建立一個基本的HTML頁面，其中包含頭部和主體標籤，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步驟2：載入API

使用script標籤載入或包含谷歌地圖API，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步驟3：建立容器

為了容納地圖，我們必須建立一個容器元素，通常使用<div>標籤（一個通用容器）來實現此目的。建立一個容器元素並定義其尺寸，如下所示：

<div id = "sample" style = "width:900px; height:580px;"></div>

步驟4：地圖選項

在初始化地圖之前，我們必須建立一個mapOptions物件（它就像一個字面量一樣建立），併為地圖初始化變數設定值。地圖有三個主要選項，即中心點、縮放級別和地圖型別。

中心點 - 在此屬性下，我們必須指定要將地圖中心定位到的位置。要傳遞位置，我們必須透過將所需位置的緯度和經度傳遞給建構函式來建立一個LatLng物件。
縮放級別 - 在此屬性下，我們必須指定地圖的縮放級別。
地圖型別 - 在此屬性下，我們必須指定所需的地圖型別。以下是谷歌提供的幾種地圖型別：
- ROADMAP（普通地圖，預設的二維地圖）
- SATELLITE（衛星地圖）
- HYBRID（混合地圖，兩種或多種其他型別的組合）
- TERRAIN（地形地圖，包含山脈、河流等）

在一個函式中，例如loadMap()，建立mapOptions物件併為center、zoom和mapTypeId設定所需的值，如下所示。

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

步驟5：建立地圖物件

您可以透過例項化名為Map的JavaScript類來建立地圖。例項化此類時，必須傳遞一個HTML容器來容納地圖以及所需地圖的地圖選項。建立一個地圖物件，如下所示。

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

步驟6：載入地圖

最後，透過呼叫loadMap()方法或新增DOM監聽器來載入地圖。

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

示例

以下示例演示如何載入名為Vishakhapatnam（維沙卡帕特南）的城市的路線圖，縮放級別為12。

線上演示

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

列印頁面