Google Maps API v3 實用技巧 (一) 地圖設定

[anti-both]

Google Maps 大 家 都 知 道 吧 ？不 管 是 桌 面 網 頁 版 ，還 是 手 機 應 用 程 式 ，大 家 都 用 得 不 少 。作 為 program 麻 ，每 次 遇 到 工 作 上 或 者 幫 朋 友 的 網 頁 要 加 入 地 圖 ，筆 者 都 會 使 用 Google Maps。使 用 Google Maps 的 好 處 是 免 費 ，也 不 用 擔 心 版 權 問 題 。

要 在 自 己 的 網 站 加 入 Google Maps，最 簡 單 的 就 是 使 用 Google Maps Javascript API。自 從 到 了 v3，在 功 能 上 、速 度 上 ，都 增 強 不 少 。基 本 的 教 學 ，Google 自 己 的 網 站 就 已 經 非 常 詳 細 ，筆 者 就 不 Copy & Paste 了 ，大 家 可 以 到 Google 的 網 站 去 看 。

Google Maps Developer’s Guide – Getting Started
Google Maps API Reference
Google Maps Code Samples

最 簡 單 最 簡 單 的 Google Maps，首 先 要 引 用 Google Map Api，然 後 在 網 頁 裡 面 要 有 一 個 DIV 供 Google Maps 使 用 ，最 後 就 要 在 你 的 Javascript 之 中 新 增 一 個 Map object。

1
2
3
4
5
6
7
8
9
10
11
12

...
// somewhere in your head
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
...
...
// somewhere in your javascript
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
...
...
// somewhere in you body
<div id="map-canvas"></div>
...

很 多 朋 友 都 不 留 意 ，其 實 Google Maps Api 的 地 圖 是 有 非 常 多 的 地 方 可 以 設 定 的 ，這 可 以 讓 你 在 自 己 的 網 站 上 建 立 獨 一 無 二 的 地 圖 。 筆 者 最 先 會 設 定 的 就 是 地 圖 的 語 言 ，但 這 個 設 定 有 點 特 別 ，不 是 在 Map Options 裡 面 設 定 的 ，而 要 在 引 用 Google Maps API 時 作 為 參 數 加 入 的 。

1

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=zh-TW"></script>

這 裡 就 是 如 何 將 地 圖 當 地 語 系 化 ，和 官 方 的 Supported Languages。

然 後 就 是 設 定 那 個 Map Options。Map Options 裡 面 ，除 了 center 和 zoom 是 必 要 的 ，其 他 都 是 選 項 。這 些 選 項 主 要 是 設 定 地 圖 上 的 控 制 項 ，還 有 滑 鼠 的 Cursor。

1
2
3
4
5
6
7
8
9
10
11
12
13

var myOptions = {
   zoom: 10,
   center: new google.maps.LatLng(22.30, 114.16),
   streetViewControl: false,
   scaleControl: true,
   zoomControl: true,
   zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      style: google.maps.ZoomControlStyle.LARGE
   },
   draggableCursor: 'crosshair'
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Google Maps 總 共 有 七 個 控 制 項 ，預 設 會 顯 示 那 幾 個 ，要 依 你 的 平 台 和 屏 幕 大 小 而 定 。
Zoom control
Pan control
MapType control
Scale control
Street View control
Rotate control
Overview Map control

當 然 你 也 可 以 自 己 去 決 定 每 個 控 制 項 要 不 要 顯 示 ( 例 zoomControl: true / false )。

而 每 一 個 控 制 項 ，都 會 有 自 己 的 Control Options。例 如 上 例 中 ，zoom Control 就 可 以 再 設 定 position 和 style。大 家 要 注 意 ，每 個 控 制 項 的 Control Options 都 是 不 一 樣 的 。除 了 內 建 的 控 制 項 ，大 家 還 可 以 自 訂 控 制 項 ，有 興 趣 的 朋 友 可 以 參 考 Google 的 例 子 。

至 於 滑 鼠 的 Cursor，我 們 可 以 使 用 CSS 的 cursor，就 像 上 例 中 的 crosshair ( 十 字 線 )。大 家 也 可 以 參 考 w3schools.com 的 CSS cursor property。當 然 我 們 也 可 以 使 用 自 己 的 圖 示 ，但 這 時 候 我 們 必 須 要 設 定 至 少 一 個 是 css 的 fallback 圖 示 。

1
2
3

...
draggingCursor: 'url(http://www.example.com/icon.png), auto;',
...

在 地 圖 建 立 好 之 後 ，如 果 想 更 改 Map Options 的 話 ，我 們 可 以 用 setOptions 方 法 。基 本 上 所 有 Map Options 都 可 以 用 setOptions 來 設 定 的 。

1
2
3
4
5
6

var NewOptions = {
...
draggableCursor:'crosshair',
...
};
map.setOptions(NewOptions);

又 或 者 只 作 少 量 更 改 的 話 ：

1

map.setOptions({draggableCursor:'crosshair'});

在 Map Options 中 還 有 一 個 獨 立 的 大 項 ，叫 做 Styles。Styles 可 以 改 變 Google Maps 的 外 觀 ( 主 要 是 ROADMAP 的 外 觀 ，SATELLITE 就 只 會 影 響 那 些 Labels )。在 ROADMAP 中 的 各 類 東 西 ，例 如 公 園 、學 校 、高 速 公 路 、大 海 等 等 ，你 都 可 以 在 Styles 之 中 自 訂 顯 不 顯 示 、自 訂 顏 色 、透 明 度 等 等 。這 讓 你 可 以 真 正 自 訂 一 張 獨 一 無 二 的 Google 地 圖 。

Styles 就 一 個 Array，裡 面 可 以 有 一 個 或 者 多 個 MapTypeStyle object。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var stylesArray = [{
   "stylers": [{
      "visibility": "off"
   }]
}, {
   "featureType": "water",
   "elementType": "geometry",
   "stylers": [{
         "visibility": "on"
      },
      {
         "color": "#6a7da0"
      }
   ]
}, {
   "featureType": "landscape",
   "elementType": "geometry",
   "stylers": [{
         "visibility": "on"
      },
      {
         "color": "#efebd3"
      }
   ]
}];
map.setOptions({
   styles: stylesArray
});

在 上 例 的 stylesArray 當 中 ，筆 者 在 第 一 個 MapTypeStyle object 把 所 有 東 西 都 設 定 為 不 顯 示 ( 沒 有 featureType 和 elementType 就 是 All 的 意 思 了 )。然 後 在 第 二 個 就 設 定 了 water.geometry ( 就 是 地 圖 上 的 水 ) 的 顏 色 。在 第 三 個 就 landscape.geometry ( 就 是 地 圖 上 的 地 ) 的 顏 色 。結 果 就 是 地 圖 上 只 有 陸 地 和 海 洋 ( 也 有 湖 泊 河 流 ) 兩 樣 東 西 ，所 有 別 的 東 西 例 如 道 路 、建 築 物 之 類 的 東 西 都 沒 有 了 。

那 個 Styles Array 看 起 來 很 複 雜 ，而 裡 面 能 夠 設 定 的 東 西 也 蠻 多 的 ，所 以 Google 就 為 我 們 建 立 了 Styling Wizard: Google Maps APIs ( Wizard 在 IE 執 行 時 好 像 會 有 點 問 題 ，大 家 用 Firefox 或 者 Chrome 吧 )，我 們 只 要 輕 輕 鬆 鬆 就 可 以 互 動 地 建 立 好 我 們 自 己 想 要 的 Style 了 。如 果 連 自 己 在 Wizard 動 手 也 不 想 ，網 上 當 然 也 有 千 千 萬 萬 已 經 製 作 好 的 Style 給 大 家 去 下 載 ( 例 如 : snazzymaps.com )。

下 面 就 是 由 上 面 的 例 子 製 作 出 來 的 地 圖 ，是 不 是 跟 平 常 的 Google Map 很 不 一 樣 呢 ？

張先生，男性，肖龍。
職業：I.T. Consultant
簡介：不好好讀書；七尺差五寸，手長過膝，雙耳垂肩；性寬和，寡言語，喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……