Google Maps API 實作mdash以「商圈中超商門市分佈調查」為例

萬能工商 許瑞益

壹 前言

一家店鋪開發的成功與否取決於很多因素其中商圈調查與立地評估對於適不

適合開店尤其重要以往的商圈調查與立地評估常因資料不易取得且在搜集資料

的過程中花費相當多的時間無法立即作出評估而錯失開店的時機

在商圈調查中地理位置及相似程度店舖數量之調查常以地圖作為輔助以徒步

方圓 100 公尺為例統計其相似經營模式之店舖數量並了解其地理方位及其相關性

便可以在地圖上作記號作為日後評估之依據在電子地圖被提出後取代了早期的紙

本地圖人們變得更理解地圖地圖的搜尋更加人性也更容易找到想資訊

我們利用 Google Maps 的各項功能在交通地理位置與店舖數量的統計上正可以

輕鬆的被查詢出來對於商圈調查是很有助益的本文使用 Google 所提供人性化且具彈

性的 Google Maps API 來實作專屬於我們想要搜尋的地圖與地標對商圈中各超商門市

的分佈與地理位置亦可以清楚呈現達成我們調查的目的

貳 本文

一Google Maps 所提供的功能與優勢

Google Maps是 Google 公司向全球提供的電子地圖服務當 Google 毅然的收

購了衛星照相公司 Keyhole 後便在電子地圖的功能上大大提昇不同於其它電子地

圖的是它獨特的具有詳細的衛星照片以供查詢並發展了 Google Earth(簡稱 GE)

以 3D 的視圖提供不同於 2D 的電子地圖模式另外 Google 在 2008 年 4 月 15 日正

式整合了街景服務這項服務最初啟用時僅涵蓋美國的五大城市如今已擴展至

美國法國意大利荷蘭英國西班牙澳大利亞紐西蘭日本台灣瑞

士葡萄牙加拿大捷克墨西哥新加坡瑞典及丹麥等國家和地區的各大城

市讓地球的距離因此拉近可以簡單清楚的遠觀地球另一端

Google Maps 是非常成功而有用的服務雖然街景視圖(Street View)將實景照片

公開的方式導致了一些隱私爭議但是不可否認的從平常的交通約會旅遊

路線查詢到各種地理知識的考察或是在重大災難重大事件時的地圖媒體功能

上Google Maps 都證明了這款線上地圖服務的資訊整合能力有辦法把世界的在地

真實情況傳送到我們面前

在 Google 地圖服務中除了一般的交通路線查詢還有地點經緯度的查詢及規

劃自己的地圖日記最短距離的查詢近年來Google Maps 不斷的提昇自我的功能

更涵蓋了商家資訊及搭乘交通工具之規劃如步行公車或是捷運的時間計算透

過 Local search 結合 Google maps讓我們可以建立地區化商家或公共場合的資訊

增加生活機能的適地性服務（Location-based Service LBS ）

Google Maps 提供了三種有彈性的地圖視圖一為傳統之地圖可提供政區和交

通以及商業信息二是不同解析度的衛星照片(俯視圖或 45deg視圖影像)三是地形圖

可以用以顯示地形和等高線這些功能強大且獨有的特性讓 Google 在電子地圖的

領域中始終保持領先無可取代的地位

二學習實作 Google Static Maps API(靜態地圖)

學習 Google Static Maps API我們可以大致先了解 Google提供了一個簡易的作

法透過一串 http的語法就可以將我們想要的地標標示出來可說是簡易版的 API

這個 API 的提供讓我們容易的將 Google Maps 放入我們的網頁中完全不需

JavaScript 語法或任何動態網頁來載入實作中對於程式的變數去作改變就可以

呈現出我們想要的結果學習上很有趣結果也很直接可以顯現

Google Static Map 服務會根據透過標準 HTTP 要求傳送的網址參數建立我們

的地圖並傳回該地圖並可嵌入至網頁中

Google Static Maps API 的 http 網址格式說明如下

httpmapsgooglecommapsapistaticmapparameters

我們只需建立上方網址再將網址放入 ltimg src=gt 標記中就大功告成了

Static Maps API 用來定義地圖圖片之網址參數有以下四種

(1) 位置參數

center定義地圖的中心也就是以此位置為地圖之中心點這個參數可以是

以字串地址 (例如「city hall new york ny」) 或逗號分隔的 緯度經

度 配對 (例如「40714728-73998672」) 表示的位置

註地址經度緯度查詢請鍵入以下網址輸入名稱查詢(可以是中文)

httpcardurlcomtwrealadsmap_latlngphp

zoom定義地圖的「縮放等級」等級為 0(檢視整個世界)~21(檢視個別建築物)

(2) 地圖參數

size (必要)定義地圖圖片的矩形大小這個參數接受 value x value 格式的字

串其中先指出水平像素再指出垂直像素例如500x400 定

義地圖寬為 500 個像素而高為 400 個像素如果您建立的地

圖寬小於或等於 100 個像素則會自動縮小「Google 技術提供」

標誌的尺寸

format (選用)定義結果圖片的格式根據預設Static Maps API 會建立 PNG

圖片但也可選用其他格式例如 GIFJPEG 以及 PNG 類型

網址參數

maptype(選用)定義要建構的地圖類型可用的地圖類型包括

roadmap(預設) 標準道路圖圖片

satellite衛星圖片

hybrid實際立體模型地圖圖片可顯示地形和植被

terrain衛星和道路圖的混合圖片

language(選用)定義地圖方塊上標籤的顯示語言請注意這個參數僅適用

於部分國家地區地圖方塊如果地圖方塊集不支援參數指定

的語言則地圖方塊集將使用預設的語言

(3) 功能參數

markers (選用)地標會定義一或多個標記以附加至圖片的指定位置這個

參數接受單一標記定義其中每個參數應以直立線 (|) 字元分

隔只要標記使用的樣式相同即可全數放在同一個 markers

參數中

path (選用)定義兩個或多個相鄰點的單一路徑在指定位置疊加圖片這個

參數接受由管道字元 (|) 分隔的點定義字串

visible (選用)會指定一或多個位置地圖會持續顯示該位置

style (選用) 會定義自訂樣式以變更地圖上特定地圖項 (道路公園等等)

的呈現方式

(4) 回報參數

sensor(必要)會指出要求靜態地圖的應用程式是否有使用感應器來判斷使用

者的位置sensor=True 為有感應器(如 GPS)反之=false

詴作練習請呈現以萬能工商學校(23431202120390955)為中心點縮放等級為 16

600 200 像素呈現衛星地圖地標為水上火車站(23433462120399287)的地圖

我們只要將以下 http 協定之網址複製至瀏灠器中就完成下圖的地圖是不是很

簡單也很方便解答如下(可將下方網址複製至瀏灠器中就可看到下圖的結果)

httpmapsgooglecomstaticmapcenter=23431202120390955ampzoom=16ampsize=

600x200ampmaptype=roadmapampmarkers=23433462120399287redampsensor=false

三Google Maps API 實作

利用 Google Static Maps API 來製作之地圖略顯單調且無變化畢竟只是靜態

的效果我們詴著利用 Google Maps API v3 的語法來搜尋以本人服務學校位置之

水上鄉鎮內其 7-11全家萊爾富之各門市之所在位置並顯示所屬門市名稱住

址及電話等資訊在我們的商圈調查的議題上就相對有意義些

Google Maps API 可讓您將「Google 地圖」嵌入至您的網頁中第 3 版的 API

特別加強速度且在行動裝置以及在傳統桌上型電腦瀏覽器應用程式皆適用這個

API 提供數種公用程式讓您透過各種服務操控地圖就跟在 httpmapsgooglecom

網頁一樣並為地圖新增內容進而在您的網站上建立功能強大的地圖應用程式

現在我們就來實作「水上地區中各家超商門市分佈情況」首先我們必須透過

網路檢索搜尋出水上鄉 7-11全家萊爾富之各門市之名稱住址電話及經緯

度如下表(經緯度換算可連上 httpcardurlcomtwrealadsmap_latlngphp 查詢)

門市名稱 地址 電話 換算後之經緯度

7-11 上龍門市 嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050 23421388120390368

7-11 中庄門市 嘉義縣水上鄉中庄村 69 號 05-2892949 23421286120438008

7-11 水上門市 嘉義縣水上鄉水頭村 6 鄰中興路 134 號 05-2689754 23430521120401825

7-11 北回門市 嘉義縣水上鄉回歸村中三路三段 167 號 05-2843550 23453296120414845

7-11 柳泰門市 嘉義縣水上鄉柳鄉村柳子林路 185-20 號 05-2683409 23439071120418062

7-11 新兆軒門市 嘉義縣水上鄉民生村忠孝街 149 號 05-2840841 23448122120433892

全家鎮安門市 嘉義縣水上鄉寬士村崎子頭 31 之 2 號 05-2352125 23437515120424240

全家福德門市 嘉義縣水上鄉中正路 161 號 05-2681562 23429281120406916

全家光隆門市 嘉義縣水上鄉民生村忠孝街 145 號 05-2842230 23447320120434107

全家水上機場門市 嘉義縣水上鄉榮典路 1-1 號 05-2359354 23454524120409253

萊爾富吳鳳門市 嘉義市東區 6 吳鳳南路 647 號 05-2308340 23455188120459436

透過以下 Google Maps API V3 的程式碼實作以達到我們想要的地圖效果如下圖

(

2

)

程

在每個地標上我們可以按滑鼠點選想要查看的門市資料如下圖

lt

D

O

C

T

Y

P

E

實作程式碼

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltmeta http-equiv=content-type content=texthtml charset=UTF-8 gt

lttitlegt搜尋水上商圈中各家超商門市lttitlegt

ltstyle type=textcssgt

html height 100

body height 100 margin 0px padding 0px

map_canvas height 100

ltstylegt

ltscript type=textjavascript src=httpmapsgooglecommapsapijssensor=falsegt

ltscriptgt

ltheadgt

ltbodygt

ltdiv id=map style=width 800px height 300pxgtltdivgt

ltscript type=textjavascriptgt

var locations = [

[7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050

234213881203903681]

[7-11 中庄門市嘉義縣水上鄉中庄村 69 號 05-2892949

234212861204380082]

[7-11 水上門市嘉義縣水上鄉水頭村 6 鄰中興路 134 號 05-2689754

234305211204018253]

[7-11 北回門市嘉義縣水上鄉回歸村中三路三段 167 號 05-2843550

234532961204148454]

[7-11 柳泰門市嘉義縣水上鄉柳鄉村柳子林路 185-20 號 05-2683409

234390711204180625]

[7-11 新兆軒門市嘉義縣水上鄉民生村忠孝街 149 號 05-2840841

234481221204338926]

[全家鎮安門市嘉義縣水上鄉寬士村崎子頭 31 之 2 號 05-2352125

234375151204242407]

[全家福德門市嘉義縣水上鄉中正路 161 號 05-2681562

234292811204069168]

[全家光隆門市嘉義縣水上鄉民生村忠孝街 145 號 05-2842230

234473201204341079]

[全家水上機場門市嘉義縣水上鄉榮典路 1-1 號 05-2359354

2345452412040925310]

[萊爾富吳鳳門市嘉義市東區 6 吳鳳南路 647 號 05-2308340

2345518812045943611] ]

var map = new googlemapsMap(documentgetElementById(map)

zoom 12

center new googlemapsLatLng(23431202120390955)

mapTypeId googlemapsMapTypeIdROADMAP

)

var infowindow = new googlemapsInfoWindow()

var marker i

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

googlemapseventaddListener(marker click (function(marker i)

return function()

infowindowsetContent(locations[i][0])

infowindowopen(map marker)

)(marker i))

ltscriptgt

ltbodygt

lthtmlgt

針對程式碼 JavaScript 語法的設定說明如下

(1) Google Maps API v3 已不再須要申請 Google Maps API key 就可使用不過要

宣告為 HTML5 格式

如ltDOCTYPE htmlgt

最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現也就是

說您的應用程式應更具備跨瀏覽器相容性

(2) 定義 CSS 之ltstylegt 宣告用來表示地圖容器 ltdivgt (本例名為 map_canvas) 應

使用 HTML 主體的 100 高度如下

ltstyle type=textcssgt

html height 100

body height 100 margin 0px padding 0px

map_canvas height 100

ltstylegt

(3) 載入 Google Maps API格式如下(須放入ltheadgt及ltheadgt之中)

ltscript type=textjavascript src=httpsmapsgooglecommapsapijssensor=

falsegt ltscriptgt

如果您的應用程式是透過感應器判斷使用者位置就必須設定 sensor=true

如果您的應用程式沒有使用感應器請設定為 sensor=false

(4) 宣告一個 div 區塊用來擺放地圖

ltdiv id=map_canvas style=width 800px height 300pxgtltdivgt

(5) 設定地圖中心縮放等級及地圖模式

var myLatlng = new googlemapsLatLng(23431202120390955) 中心經緯度

var myOptions =

zoom 12 縮放等級

center myLatlng 設定地圖中心

mapTypeId googlemapsMapTypeIdROADMAP 設定地圖模式

我們需要一個描述地圖位置的方式googlemapsLatLng 物件在 Google Maps

API 中就提供這樣的機制本例是以萬能工商學校經緯度 (23431202120390955)

為地圖中心點

縮圖等級以 zoom 屬性指定顯示地圖解析度而其中縮放 0 代表完全縮小的地

球地圖而縮放等級較高會以較高解析度放大來代表其值範圍為 0~21

另外 mapTypeId 支援的類型如下

ROADMAP 顯示 Google 地圖的正常預設 2D 地圖方塊

SATELLITE 顯示圖形地圖方塊

HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路城市名稱)圖層混合圖

TERRAIN 會顯示實際起伏地圖方塊展現地形高度和水域圖徵 (山嶽

河流等)

(6) 設置地標(顯示各門市的位置)

在 Google Maps API 中我們對於地標的設定是採用 googlemapsMarker 結構函

式並用一個 Marker options 物件來指定地標的起始內容在建構標記時通常

必須設定這些欄位

position (必要欄位) 是用來指定一個 LatLng 來識別標記的起始位置

map (選用欄位) 是用來指定要將標記放到哪一個 Map 物件

在本例中我們搜尋了在商圈中多個超商門市的資料並把每個門市的資料建立

為地標我們記錄了每個門市的經緯度再編入一個 locations 的陣列中如下

var locations =

[ [7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050

234213881203903681] ]

取第一筆資料為例使用該陣列之資料我們可以用以下方式來獲得其對應的值

locations[0][0]= 7-11 上龍門市嘉義縣水上鄉龍德村

11 指厝 75-90 號 05-2683050

locations[0][1]= 23421388 (緯度)

locations[0][2]= 120390368 (經度)

我們使用迴圈方式存取多個地標並建立每各地標之 marker如下述

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

(7) 顯示各個地標的 label(可以是 html 格式的內容)

Google Maps API 使用 InfoWindow 來在地圖上方浮動視窗中顯示內容

InfoWindow 建構函式使用 InfoWindow options 物件來指定一組起始參數以用

於顯示資訊視窗剛建立時並不會將資訊視窗加到地圖中如果要顯示資訊視窗

必須在 InfoWindow 呼叫 open() 方法將方法傳送至要開啟的 Map然後視情

況使用 Marker 來錨定它 (如果未提供任何標記資訊視窗會在它的 position 屬

性指定的位置開啟)

InfoWindow options 物件是一種物件實體它包含以下欄位

content 包含顯示在資訊視窗中的文字字串或 DOM 節點

pixelOffset 包含從資訊視窗的尖端到資訊視窗錨定地點之間的位移實務

上不需要修改此欄位

position 包含資訊視窗錨定處的 LatLng請注意在標記上開啟資訊視窗

會自動將這個值換成新的位置

maxWidth 是用來指定資訊視窗的寬度上限 (以像素為單位)根據預設

資訊視窗會隨內容長度放大當調整到整張地圖的大小時裡面的文字會

自動換行

程式碼如下

var infowindow = new googlemapsInfoWindow(

content contentString

)

var marker = new googlemapsMarker(

position myLatlng

map map

)

(8) 監聽滑鼠點選(click)事件

使用 addListener() 以處理接收滑鼠事件之通知該 method 有三個參數一個對

象一個待監聽事件以及一個在指定事件發生時要使用的 function 函数

googlemapseventaddListener(marker click function()

infowindowopen(mapmarker)

上例所使用的對象是 marker 地標而處理的是 click 滑鼠按下的事件事件發生

後要使用函數之動作為打開該 marker 地標在地圖 map 上的文字內容

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

[7-11 新兆軒門市嘉義縣水上鄉民生村忠孝街 149 號 05-2840841

234481221204338926]

[全家鎮安門市嘉義縣水上鄉寬士村崎子頭 31 之 2 號 05-2352125

234375151204242407]

[全家福德門市嘉義縣水上鄉中正路 161 號 05-2681562

234292811204069168]

[全家光隆門市嘉義縣水上鄉民生村忠孝街 145 號 05-2842230

234473201204341079]

[全家水上機場門市嘉義縣水上鄉榮典路 1-1 號 05-2359354

2345452412040925310]

[萊爾富吳鳳門市嘉義市東區 6 吳鳳南路 647 號 05-2308340

2345518812045943611] ]

var map = new googlemapsMap(documentgetElementById(map)

zoom 12

center new googlemapsLatLng(23431202120390955)

mapTypeId googlemapsMapTypeIdROADMAP

)

var infowindow = new googlemapsInfoWindow()

var marker i

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

googlemapseventaddListener(marker click (function(marker i)

return function()

infowindowsetContent(locations[i][0])

infowindowopen(map marker)

)(marker i))

ltscriptgt

ltbodygt

lthtmlgt

針對程式碼 JavaScript 語法的設定說明如下

(1) Google Maps API v3 已不再須要申請 Google Maps API key 就可使用不過要

宣告為 HTML5 格式

如ltDOCTYPE htmlgt

最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現也就是

說您的應用程式應更具備跨瀏覽器相容性

(2) 定義 CSS 之ltstylegt 宣告用來表示地圖容器 ltdivgt (本例名為 map_canvas) 應

使用 HTML 主體的 100 高度如下

ltstyle type=textcssgt

html height 100

body height 100 margin 0px padding 0px

map_canvas height 100

ltstylegt

(3) 載入 Google Maps API格式如下(須放入ltheadgt及ltheadgt之中)

ltscript type=textjavascript src=httpsmapsgooglecommapsapijssensor=

falsegt ltscriptgt

如果您的應用程式是透過感應器判斷使用者位置就必須設定 sensor=true

如果您的應用程式沒有使用感應器請設定為 sensor=false

(4) 宣告一個 div 區塊用來擺放地圖

ltdiv id=map_canvas style=width 800px height 300pxgtltdivgt

(5) 設定地圖中心縮放等級及地圖模式

var myLatlng = new googlemapsLatLng(23431202120390955) 中心經緯度

var myOptions =

zoom 12 縮放等級

center myLatlng 設定地圖中心

mapTypeId googlemapsMapTypeIdROADMAP 設定地圖模式

我們需要一個描述地圖位置的方式googlemapsLatLng 物件在 Google Maps

API 中就提供這樣的機制本例是以萬能工商學校經緯度 (23431202120390955)

為地圖中心點

縮圖等級以 zoom 屬性指定顯示地圖解析度而其中縮放 0 代表完全縮小的地

球地圖而縮放等級較高會以較高解析度放大來代表其值範圍為 0~21

另外 mapTypeId 支援的類型如下

ROADMAP 顯示 Google 地圖的正常預設 2D 地圖方塊

SATELLITE 顯示圖形地圖方塊

HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路城市名稱)圖層混合圖

TERRAIN 會顯示實際起伏地圖方塊展現地形高度和水域圖徵 (山嶽

河流等)

(6) 設置地標(顯示各門市的位置)

在 Google Maps API 中我們對於地標的設定是採用 googlemapsMarker 結構函

式並用一個 Marker options 物件來指定地標的起始內容在建構標記時通常

必須設定這些欄位

position (必要欄位) 是用來指定一個 LatLng 來識別標記的起始位置

map (選用欄位) 是用來指定要將標記放到哪一個 Map 物件

在本例中我們搜尋了在商圈中多個超商門市的資料並把每個門市的資料建立

為地標我們記錄了每個門市的經緯度再編入一個 locations 的陣列中如下

var locations =

[ [7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050

234213881203903681] ]

取第一筆資料為例使用該陣列之資料我們可以用以下方式來獲得其對應的值

locations[0][0]= 7-11 上龍門市嘉義縣水上鄉龍德村

11 指厝 75-90 號 05-2683050

locations[0][1]= 23421388 (緯度)

locations[0][2]= 120390368 (經度)

我們使用迴圈方式存取多個地標並建立每各地標之 marker如下述

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

(7) 顯示各個地標的 label(可以是 html 格式的內容)

Google Maps API 使用 InfoWindow 來在地圖上方浮動視窗中顯示內容

InfoWindow 建構函式使用 InfoWindow options 物件來指定一組起始參數以用

於顯示資訊視窗剛建立時並不會將資訊視窗加到地圖中如果要顯示資訊視窗

必須在 InfoWindow 呼叫 open() 方法將方法傳送至要開啟的 Map然後視情

況使用 Marker 來錨定它 (如果未提供任何標記資訊視窗會在它的 position 屬

性指定的位置開啟)

InfoWindow options 物件是一種物件實體它包含以下欄位

content 包含顯示在資訊視窗中的文字字串或 DOM 節點

pixelOffset 包含從資訊視窗的尖端到資訊視窗錨定地點之間的位移實務

上不需要修改此欄位

position 包含資訊視窗錨定處的 LatLng請注意在標記上開啟資訊視窗

會自動將這個值換成新的位置

maxWidth 是用來指定資訊視窗的寬度上限 (以像素為單位)根據預設

資訊視窗會隨內容長度放大當調整到整張地圖的大小時裡面的文字會

自動換行

程式碼如下

var infowindow = new googlemapsInfoWindow(

content contentString

)

var marker = new googlemapsMarker(

position myLatlng

map map

)

(8) 監聽滑鼠點選(click)事件

使用 addListener() 以處理接收滑鼠事件之通知該 method 有三個參數一個對

象一個待監聽事件以及一個在指定事件發生時要使用的 function 函数

googlemapseventaddListener(marker click function()

infowindowopen(mapmarker)

上例所使用的對象是 marker 地標而處理的是 click 滑鼠按下的事件事件發生

後要使用函數之動作為打開該 marker 地標在地圖 map 上的文字內容

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

針對程式碼 JavaScript 語法的設定說明如下

(1) Google Maps API v3 已不再須要申請 Google Maps API key 就可使用不過要

宣告為 HTML5 格式

如ltDOCTYPE htmlgt

最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現也就是

說您的應用程式應更具備跨瀏覽器相容性

(2) 定義 CSS 之ltstylegt 宣告用來表示地圖容器 ltdivgt (本例名為 map_canvas) 應

使用 HTML 主體的 100 高度如下

ltstyle type=textcssgt

html height 100

body height 100 margin 0px padding 0px

map_canvas height 100

ltstylegt

(3) 載入 Google Maps API格式如下(須放入ltheadgt及ltheadgt之中)

ltscript type=textjavascript src=httpsmapsgooglecommapsapijssensor=

falsegt ltscriptgt

如果您的應用程式是透過感應器判斷使用者位置就必須設定 sensor=true

如果您的應用程式沒有使用感應器請設定為 sensor=false

(4) 宣告一個 div 區塊用來擺放地圖

ltdiv id=map_canvas style=width 800px height 300pxgtltdivgt

(5) 設定地圖中心縮放等級及地圖模式

var myLatlng = new googlemapsLatLng(23431202120390955) 中心經緯度

var myOptions =

zoom 12 縮放等級

center myLatlng 設定地圖中心

mapTypeId googlemapsMapTypeIdROADMAP 設定地圖模式

我們需要一個描述地圖位置的方式googlemapsLatLng 物件在 Google Maps

API 中就提供這樣的機制本例是以萬能工商學校經緯度 (23431202120390955)

為地圖中心點

縮圖等級以 zoom 屬性指定顯示地圖解析度而其中縮放 0 代表完全縮小的地

球地圖而縮放等級較高會以較高解析度放大來代表其值範圍為 0~21

另外 mapTypeId 支援的類型如下

ROADMAP 顯示 Google 地圖的正常預設 2D 地圖方塊

SATELLITE 顯示圖形地圖方塊

HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路城市名稱)圖層混合圖

TERRAIN 會顯示實際起伏地圖方塊展現地形高度和水域圖徵 (山嶽

河流等)

(6) 設置地標(顯示各門市的位置)

在 Google Maps API 中我們對於地標的設定是採用 googlemapsMarker 結構函

式並用一個 Marker options 物件來指定地標的起始內容在建構標記時通常

必須設定這些欄位

position (必要欄位) 是用來指定一個 LatLng 來識別標記的起始位置

map (選用欄位) 是用來指定要將標記放到哪一個 Map 物件

在本例中我們搜尋了在商圈中多個超商門市的資料並把每個門市的資料建立

為地標我們記錄了每個門市的經緯度再編入一個 locations 的陣列中如下

var locations =

[ [7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050

234213881203903681] ]

取第一筆資料為例使用該陣列之資料我們可以用以下方式來獲得其對應的值

locations[0][0]= 7-11 上龍門市嘉義縣水上鄉龍德村

11 指厝 75-90 號 05-2683050

locations[0][1]= 23421388 (緯度)

locations[0][2]= 120390368 (經度)

我們使用迴圈方式存取多個地標並建立每各地標之 marker如下述

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

(7) 顯示各個地標的 label(可以是 html 格式的內容)

Google Maps API 使用 InfoWindow 來在地圖上方浮動視窗中顯示內容

InfoWindow 建構函式使用 InfoWindow options 物件來指定一組起始參數以用

於顯示資訊視窗剛建立時並不會將資訊視窗加到地圖中如果要顯示資訊視窗

必須在 InfoWindow 呼叫 open() 方法將方法傳送至要開啟的 Map然後視情

況使用 Marker 來錨定它 (如果未提供任何標記資訊視窗會在它的 position 屬

性指定的位置開啟)

InfoWindow options 物件是一種物件實體它包含以下欄位

content 包含顯示在資訊視窗中的文字字串或 DOM 節點

pixelOffset 包含從資訊視窗的尖端到資訊視窗錨定地點之間的位移實務

上不需要修改此欄位

position 包含資訊視窗錨定處的 LatLng請注意在標記上開啟資訊視窗

會自動將這個值換成新的位置

maxWidth 是用來指定資訊視窗的寬度上限 (以像素為單位)根據預設

資訊視窗會隨內容長度放大當調整到整張地圖的大小時裡面的文字會

自動換行

程式碼如下

var infowindow = new googlemapsInfoWindow(

content contentString

)

var marker = new googlemapsMarker(

position myLatlng

map map

)

(8) 監聽滑鼠點選(click)事件

使用 addListener() 以處理接收滑鼠事件之通知該 method 有三個參數一個對

象一個待監聽事件以及一個在指定事件發生時要使用的 function 函数

googlemapseventaddListener(marker click function()

infowindowopen(mapmarker)

上例所使用的對象是 marker 地標而處理的是 click 滑鼠按下的事件事件發生

後要使用函數之動作為打開該 marker 地標在地圖 map 上的文字內容

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

縮圖等級以 zoom 屬性指定顯示地圖解析度而其中縮放 0 代表完全縮小的地

球地圖而縮放等級較高會以較高解析度放大來代表其值範圍為 0~21

另外 mapTypeId 支援的類型如下

ROADMAP 顯示 Google 地圖的正常預設 2D 地圖方塊

SATELLITE 顯示圖形地圖方塊

HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路城市名稱)圖層混合圖

TERRAIN 會顯示實際起伏地圖方塊展現地形高度和水域圖徵 (山嶽

河流等)

(6) 設置地標(顯示各門市的位置)

在 Google Maps API 中我們對於地標的設定是採用 googlemapsMarker 結構函

式並用一個 Marker options 物件來指定地標的起始內容在建構標記時通常

必須設定這些欄位

position (必要欄位) 是用來指定一個 LatLng 來識別標記的起始位置

map (選用欄位) 是用來指定要將標記放到哪一個 Map 物件

在本例中我們搜尋了在商圈中多個超商門市的資料並把每個門市的資料建立

為地標我們記錄了每個門市的經緯度再編入一個 locations 的陣列中如下

var locations =

[ [7-11 上龍門市嘉義縣水上鄉龍德村 11 指厝 75-90 號 05-2683050

234213881203903681] ]

取第一筆資料為例使用該陣列之資料我們可以用以下方式來獲得其對應的值

locations[0][0]= 7-11 上龍門市嘉義縣水上鄉龍德村

11 指厝 75-90 號 05-2683050

locations[0][1]= 23421388 (緯度)

locations[0][2]= 120390368 (經度)

我們使用迴圈方式存取多個地標並建立每各地標之 marker如下述

for (i = 0 i lt locationslength i++)

marker = new googlemapsMarker(

position new googlemapsLatLng(locations[i][1] locations[i][2])

map map

)

(7) 顯示各個地標的 label(可以是 html 格式的內容)

Google Maps API 使用 InfoWindow 來在地圖上方浮動視窗中顯示內容

InfoWindow 建構函式使用 InfoWindow options 物件來指定一組起始參數以用

於顯示資訊視窗剛建立時並不會將資訊視窗加到地圖中如果要顯示資訊視窗

必須在 InfoWindow 呼叫 open() 方法將方法傳送至要開啟的 Map然後視情

況使用 Marker 來錨定它 (如果未提供任何標記資訊視窗會在它的 position 屬

性指定的位置開啟)

InfoWindow options 物件是一種物件實體它包含以下欄位

content 包含顯示在資訊視窗中的文字字串或 DOM 節點

pixelOffset 包含從資訊視窗的尖端到資訊視窗錨定地點之間的位移實務

上不需要修改此欄位

position 包含資訊視窗錨定處的 LatLng請注意在標記上開啟資訊視窗

會自動將這個值換成新的位置

maxWidth 是用來指定資訊視窗的寬度上限 (以像素為單位)根據預設

資訊視窗會隨內容長度放大當調整到整張地圖的大小時裡面的文字會

自動換行

程式碼如下

var infowindow = new googlemapsInfoWindow(

content contentString

)

var marker = new googlemapsMarker(

position myLatlng

map map

)

(8) 監聽滑鼠點選(click)事件

使用 addListener() 以處理接收滑鼠事件之通知該 method 有三個參數一個對

象一個待監聽事件以及一個在指定事件發生時要使用的 function 函数

googlemapseventaddListener(marker click function()

infowindowopen(mapmarker)

上例所使用的對象是 marker 地標而處理的是 click 滑鼠按下的事件事件發生

後要使用函數之動作為打開該 marker 地標在地圖 map 上的文字內容

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

(7) 顯示各個地標的 label(可以是 html 格式的內容)

Google Maps API 使用 InfoWindow 來在地圖上方浮動視窗中顯示內容

InfoWindow 建構函式使用 InfoWindow options 物件來指定一組起始參數以用

於顯示資訊視窗剛建立時並不會將資訊視窗加到地圖中如果要顯示資訊視窗

必須在 InfoWindow 呼叫 open() 方法將方法傳送至要開啟的 Map然後視情

況使用 Marker 來錨定它 (如果未提供任何標記資訊視窗會在它的 position 屬

性指定的位置開啟)

InfoWindow options 物件是一種物件實體它包含以下欄位

content 包含顯示在資訊視窗中的文字字串或 DOM 節點

pixelOffset 包含從資訊視窗的尖端到資訊視窗錨定地點之間的位移實務

上不需要修改此欄位

position 包含資訊視窗錨定處的 LatLng請注意在標記上開啟資訊視窗

會自動將這個值換成新的位置

maxWidth 是用來指定資訊視窗的寬度上限 (以像素為單位)根據預設

資訊視窗會隨內容長度放大當調整到整張地圖的大小時裡面的文字會

自動換行

程式碼如下

var infowindow = new googlemapsInfoWindow(

content contentString

)

var marker = new googlemapsMarker(

position myLatlng

map map

)

(8) 監聽滑鼠點選(click)事件

使用 addListener() 以處理接收滑鼠事件之通知該 method 有三個參數一個對

象一個待監聽事件以及一個在指定事件發生時要使用的 function 函数

googlemapseventaddListener(marker click function()

infowindowopen(mapmarker)

上例所使用的對象是 marker 地標而處理的是 click 滑鼠按下的事件事件發生

後要使用函數之動作為打開該 marker 地標在地圖 map 上的文字內容

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

其它滑鼠觸發事件如下這些事件看起來與標準的 DOM 事件相似但它們其實

是 Maps API 的一部分

click

dblclick

mouseup

mousedown

mouseover

mouseout

四Google Maps API 的其它功能介紹

Google Maps API v3 功能之強大不是這個例子可以完整呈現的其中尚有規劃

最短路徑在地圖上繪幾何圖形改變控制項或是可在行動裝置上快速載入與運作

用兩指撥動縮放hellip等特殊用途的功能另外它提供了不少資料完整的 libraries可

讓我們的地圖更加有變化且更具特色

以下是目前 Google Maps API v3 所提供的 libraries

adsense (廣告地圖資料庫)包括上下文敏感的文字廣告可在地圖上添加廣告

drawing(繪圖資料庫)提供了一個圖形界面可繪製多邊形矩形折線圓hellip等

geometry(幾何圖形資料庫)包括座標幾何值（如距離和面積）計算地球表面hellip等

panoramio(地理相冊資料庫)包含加入 Panoramio 的照片到您的地圖 API 應用層

places(地方資訊資料庫)可以搜索如機構地理位置hellip等

visualization(人口統計學資料庫)提供給商業用戶的 Google 地圖並提供了美國的

人口資訊

weather(天氣資料庫)可將天氣氣象預報和衛星雲圖添加到您的地圖

五Google Maps API 的支援性

(1) Google Maps API 支援的國家地區

目前共 218 個國家地圖另「Google 地圖」小組正不斷新增地圖資料以涵蓋

更多國家地區

請參閱 httpgmaps-samplesgooglecodecomsvntrunkmapcoverage_filteredhtml

(2) Google Maps JS API v3 支援哪些網頁瀏覽器

IE 70+ (Windows)

Firefox 30+ (WindowsMac OS XLinux)

Safari 4+ (Mac OS XiOS)

Chrome (WindowsMac OS XLinux)

Android

BlackBerry 6

Dolfin 20+ (Samsung Bada)

(3) Google Maps API for Flash 支援哪些工具和 Flash 播放器

Google Maps API for Flash 支援 Flash Player 9 從 901510 版開始所發行的穩

定版本另外它支援的開發工具包括 Flex Builder 3Adobe Flash CS3 和 Flex 3

SDK

參 結論

目前 web 20 的技術不斷提昇現在與未來將是網路運用的新時代網路成為了新

的平台內容因為每位使用者的參與而產生所產生的個人化內容藉由人與人(P2P)的

分享(Share)形成了 Web 20 的世界Google 即為 Web20 的代表前一陣子 Google 推

出的 Google Page 也有異曲同工之妙利用免費提供部落格服務的形式從中搜集更多消

費者的習性其中的用意就是要為消費者量身訂做一個個人化的 Google進而創造了更

多無限的商機

我們利用了 Google Maps API 來簡單的實作藉以調查商圈週邊的各家超商門市之

訊息是為了讓學習者透過此一簡單的例子來建構自己想要的地圖資訊在教學實務

上我們常碰到相關地理資訊的查詢如資訊科技課程中請學生利用 Google Maps 查

尋出某個地標方位或是其附近之商家資料或是查詢兩地距離及規劃旅遊路線hellip等另在

電子商務課程中也可以請學生調查該公司之各地經銷商地點等資訊或其上下游廠商及

物品配送路徑hellip等都是應用到電子地圖的最好例子有了這些例子教學者便可以思

考如何透過 Google Maps 的應用或是 Google Maps API 的實作來創新出更多更有趣的

教材

參考文獻

1 賴明宗(2008)地標資訊視覺化之電子地圖導覽系統靜宜大學資訊管理系碩士論文

2 陳星佑(2011)Google Map 結合 blog 在視覺藝術學習成就與學習態度之研究-以世界

遺產為例屏東教育大學資訊科學系碩士論文

3 張智惟((2001)以網路為基礎之地理資訊系統影響競爭優勢研究雲林科技大學資訊

管理系碩士論文

4 沈武賢修平技術學院創業規劃管理教材-商圈調查與立地評估

5 Google 官方 API 文件Google Maps Javascript API 第 3 版

httpsdevelopersgooglecommapsdocumentationjavascripthl=zh-TW

6 台灣維基百科

httpzhwikipediaorgwikiMain_Page

7 DS 研究室google map 地圖 blog 上的應用

httpfreeinfocream123comp=43

8 財團法人國家實驗研究院科技政策研究與資訊中心Google Maps 顛覆電子地圖服務

模式-產業策略評析

httpcdnetstpiorgtwtechroomanalysispat019htm

9 沈時孙(2005)httpblogyamcomsyshenarticle5158404

10 MBALIB 智庫百科網站全球規模最大的搜索引擎Google 公司（Google）

httpwikimbalibcomzh-twGoogle

11 Daniel Vassallo(2010)Google Maps JS API v3 - Simple Multiple Marker Example

httpstackoverflowcomquestions3059044google-maps-js-api-v3-simple-multiple-

marker-example

12 Jayhsu (2011)Jayhsus Note

httpjayhsunoteblogspotcom201106google-map-javascript-api-v3html