the study for Google map API as well as Open Street API for map-based application.

1. Study Map API
v0.1
Paul Yang, Mar.2015

2. Flow – Loading (Use as GoogleAPI as
reference)
 Initialize
 Select title’s source
 Inject Auth key
 mapOption for setting default zoom, center, and ON/OFF for the default UI like panControl and
zoomControl and mapTypeControlOptions and zoomControlOptions
 create an array of styles (if using own tile, this happens in beckend)
 Markers and infowindow
 Create an array of data for marker, infowindow
 Instance latlng object with geo data above
 Custom UI image settings like Anchor, origin, url , size, shape for marker and infowindow
 Instance marker and infowindow object
 setMarker(map, location)
 Add listener for marker’s click in order to show infowindow
 loading the map (binding to DOM)
 google.maps.event.addDomListener(window, 'load', initialize)

3. Flow – Loading (Use as GoogleAPI as
reference)
• UI control
• Default UI
• ON/OFF and Position
• Put oogle.maps.ControlPosition.BOTTOM_CENTER in mapTypeControlOptions
and zoomControlOptions
• Custom UI
• Create DOM element for INPUTs ( state and method)
• Give them the UI settings like backgroundColor, border
• Add listener for DOM region for designated acton
• Position it in map by ex.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerCon
trolDiv)

4. Flow – Loading (Use as GoogleAPI as
reference)
• Layer from KML, GeoJSON for line, polygon
• Load from URL or local side
• Feed the setting of feature style
• Add listener for the event ex. Static or dynamic (mouseover for
one style and mouseout for another style)
• In google, by revertStyle();;map.data.setStyle

5. Google MAP API

6. Custom MAP looks - Styled Maps
 Native support in MAP v3
 https://developers.google.com/maps/customize?hl=zh-tw
 Styled Maps Wizard native support in MAP v3
 http://gmaps-samples-
v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
 However Android MAP V2 doesn’t support it and we may use TileOverlay ONLY
 http://stackoverflow.com/questions/16520121/customize-color-scheme-of-
google-maps-v2-in-android
 https://developers.google.com/maps/documentation/android/tileoverlay
 https://developer.android.com/reference/com/google/android/gms/maps/mo
del/TileOverlay.html

7. Basic flow (JavaScript V3) – 1
同步方式載入 API
 取得 API 金鑰
 使用 script 標記來加入 Maps API JavaScript。
 建立 div 元素 (名稱為「map_canvas」) 來容納「地圖」
 Declare mapOtions for the settings like center and zoom
 New google.maps.Map with the assignned UI id
 Perform in onload 事件
非同步方式載入 API
https://developers.google.com/maps/documentation/java
script/examples/map-simple-async?hl=zh-tw

8. Basic flow (JavaScript V3) - 2
營利性網站可以使用 Google Maps JavaScript API 第 3 版，每日最多載入 25,000 次地圖。只要地圖
在網頁上完成初始化作業，系統就會計算一次地圖載入。地圖載入之後，使用者與地圖的互動 (例如，
移動地圖、縮放地圖，或將道路圖變更為衛星圖) 並不會影響使用限制。
 如果您經營的營利性網站每天持續超過 Maps API 使用限制，就必須採用以下其中一種因應方法：
 透過 Google API 控制台購買額外配額。
 購買 Google Maps API for Business 授權。
 修改網站，讓使用量降到限額以下。

9. Basic flow (JavaScript V3) - 4
MapEvent
center_changed
https://developers.google.com/maps/documentation/javascript/examples/event-
simple?hl=zh-tw
如果您要嘗試偵測檢視區中的變更，請務必使用特定的 bounds_changed 事件，而非
zoom_changed 和 center_changed 的組成事件。由於 Maps API 會獨立引發後兩類事件，因此在
檢視區獲得授權變更之前，getBounds() 可能都無法回報實用的結果。如果您想在這類事件之後執行
getBounds()，請務必改成接聽 bounds_changed 事件。
在事件接聽程式中使用 Closure
在事件處理常式中取得並設定屬性
var zoomLevel = map.getZoom();
接聽 DOM 事件
addDomListener()

10. Basic flow (JavaScript V3) - 5
控制項
停用預設使用者介面
請將 Map 的 disableDefaultUI 屬性 (在 Map options 物件內) 設為 true
在地圖中加入控制項
地圖控制項的新增或移除作業是由 Map options 物件的下列欄位所指定；設為 true 顯示控制項，或是設為 false 隱藏控制項：
許多控制項可經由調整設定來改變其行為或外觀。例如，「縮放控制項」的形態可以是附有完整縮放控制項與滑桿的大型控制項，也可以是適用於小型地圖的迷你縮
放控制項。
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
設定控制項位置
TOP_CENTER 指定控制項需放置於地圖的中間正上方。
TOP_LEFT 指定控制項需放置於地圖的左上方，而該控制項的任何子元素會朝上方中間「流動」。
https://developers.google.com/maps/documentation/javascript/controls?hl=zh-tw

11. Basic flow (JavaScript V3) - 6
設定自訂控制項位置
 您可透過 Map 物件中的 controls 屬性，將自訂控制項放置於地圖上適當的位置。這個屬性包含多個
google.maps.ControlPosition 的陣列。您只要在適當的 ControlPosition 中新增 Node (通常是 <div>)，
即可將控制項加到地圖
 https://developers.google.com/maps/documentation/javascript/examples/control-
custom?hl=zh-tw
將狀態加入控制項
https://developers.google.com/maps/documentation/javascript/examples/control-custom-
state?hl=zh-tw

12. Basic flow (JavaScript V3) - 7
 樣式標記地圖可讓您自訂標準 Google 基本地圖的呈現方式，變更如道路、公園及
高度開發區這類元素的視覺化呈現方式
 兩種將樣式套用至地圖的方法
 設定地圖 MapOptions 物件的 .styles 屬性。這個方法會變更標準地圖類型的樣式 (地形
和衛星檢視畫面中的基礎圖像不受影響，但道路和標籤等則會套用樣式規則
 建立及定義 StyledMapType，再將其套用至地圖。這會建立新的地圖類型，供您從地圖
類型控制項中加以選取。請參閱建立 StyledMapType。
 這兩種方法都會採用 MapTypeStyle 陣列，而且各自由「選取器」和「樣式工具」
構成。選取器可以指定在套用樣式時應選取哪些地圖元件，樣式工具則指定這些元
素要修改的視覺呈現方

13. Basic flow (JavaScript V3) - 8
 FIRST請於建構時在地圖的 MapOptions 中設定樣式陣列，或者呼叫 setOptions
 var styles = [{featureType: '', elementType: '',stylers: [{hue: ''},{saturation:
''},{lightness: ''}]]
 map.setOptions({styles: styles});
 OR
 需建立 StyledMapType，然後將地圖項和樣式工具資訊傳送至建構函式
 var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});

14. Basic flow (JavaScript V3) - 9
google.maps.MapTypeStyleFeatureType object specification
 https://developers.google.com/maps/documentation/javascript/referenc
e?hl=zh-tw#MapTypeStyleFeatureType
Constant Description
administrative Apply the rule to administrative
areas.
administrative.country Apply the rule to countries.
administrative.land_parcel Apply the rule to land parcels.
administrative.locality Apply the rule to localities.
administrative.neighborhood Apply the rule to neighborhoods.
administrative.province Apply the rule to provinces.
Constant

15. Basic flow (JavaScript V3) - 10
 Styled Maps Wizard
 http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
 The Site to provide lots of the example of styled map.
 https://snazzymaps.com/style/131/mondrian
 BTW, the author’s introduction site is brilliant
 http://leethree.me/

16. Basic flow (JavaScript V3) - 11
 Overlay
 Marker
 marker.setMap(map);
Or
 markersArray[i].setMap(map) ; markersArray[i].setMap(null);
 複雜圖示 (較複雜的圖示需要指定複雜的形狀(表示可點擊的區域)、加上陰影圖片以及指定相對於其他疊加層的顯示「堆疊順序」。) https://developers.google.com/maps/documentation/javascript/examples/icon-complex
 Symbol (是一種可以顯示在 Marker 或 Polyline 物件上的向量式圖片)
 google.maps.SymbolPath.CIRCLE
 動畫 (您也可將標記製作成動畫，讓標記可以在不同的場景展現動態動作)
 Polyline 類別定義了地圖上連接線段的線性疊加層。Polyline 物件是由 LatLng 位置的陣列所組成 https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
 Polygon (can add listener)
 https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
 多邊形會將其一系列座標指定為陣列的陣列，其中每一個陣列都屬於 MVCArray 類型。每一個「葉狀」陣列是指定單一路徑的 LatLng 座標陣列。如要擷取這些座標，請呼叫 Polygon 的 getPaths() 方法。由於陣列是 MVCArray，因此
您必須使用下列操作方式操控並檢查陣列：
 https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays
 矩形圓形
 使用者可編輯的形狀
 任何形狀的疊加層 (折線、多邊形、圓形以及矩形) 都可將形狀選項中的 editable 設為 true，設為允許使用者編輯的狀態。
 https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
 編輯形狀時，會在編輯完成時引發一個事件
 ex. 多邊形 insert_at
 remove_at
 set_at

17. Basic flow (JavaScript V3) - 12
 Drawing
 google.maps.drawing
 DrawingManager 類別提供圖形介面，讓使用者可以在地圖上繪製多邊形、矩形、折線、圓形以及標記。
DrawingManager 物件的建立方式如下：
 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
 資訊視窗
 Groundoverlay
 https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple

18. Basic flow (JavaScript V3) – 13
 自訂疊加層
 new USGSOverlay(bounds, srcImage, map);
 https://developers.google.com/maps/documentation/javascript/examples/ove
rlay-simple
 如何建立自訂疊加層：
 將自訂物件的 prototype 設為 google.maps.OverlayView() 的新實例。這樣可以有效設定疊加
層的「子類別」。
 為自訂疊加層建立一個建構函式，然後在建構函式中將任何起始參數設為自訂屬性。
 在原型中實作 onAdd() 方法，然後將疊加層附加至地圖。當地圖準備好附加疊加層時，就會呼叫
OverlayView.onAdd()。
 在您的原型中實作 draw() 方法，處理物件的視覺呈現方式。當物件初次顯示時，也會呼叫
OverlayView.draw()。
 您也應該實作 onRemove() 方法，清除您在疊加層中添加的任何元素。

19. Basic flow (JavaScript V3) – 14
 圖層
 是指地圖上由一或多個個別項目所組成的物件，但可視為單一單元進行操作。圖層通常會反映您新增
至地圖上方的物件集，以指定共通的關聯性。隨著地圖檢視區的改變，Maps API 可以將物件的構成項
目顯示為單一物件 (通常是地圖方塊疊加層)
 KmlLayer 物件會將 KML 與 GeoRSS 元素呈現在 Maps API 第 3 版地圖方塊疊加層中。
 HeatmapLayer 物物件會使用「分佈圖」視覺效果來呈現地理資料。
 FusionTablesLayer 物件會呈現 Google Fusion Tables 中所含的資料。
 TrafficLayer 物件會呈現描繪路況條件的圖層及代表路況的疊加層。
 TransitLayer 物件會在地圖上顯示城市的大眾運輸網路。
 WeatherLayer 和 CloudLayer 物件可讓您在地圖上加上天氣預報和雲層圖像。
 BicyclingLayer 物件會在常用圖層上呈現單車路徑圖層和/或單車專屬疊加層。根據預設，這個圖層會在要求
BICYCLING 交通模式的導航時，於 DirectionsRenderer 中傳回。
 PanoramioLayer 物件會將來自 Panoramio 的相片新增為圖層。
 DemographicsLayer 物件會以圖層形式呈現美國客層資訊，而且只提供 Google Maps API for Business 客戶使
用。這個物件是由 visualization 程式庫提供。

20. Basic flow (JavaScript V3) – 15
 KML and GeoRSS
 https://developers.google.com/maps/documentation/javascript/examples/lay
er-georss
 https://developers.google.com/maps/documentation/javascript/examples/lay
er-kml
 根據預設，按一下個別地圖項會開啟含有相關地圖項 KML <title> 和 <description> 資訊
的 InfoWindow。此外，點擊 KML 地圖項會產生 KmlMouseEvent 並傳送下列資訊：
 系統會將 KML <Placemark> 和 GeoRSS point 元素呈現為標記，例如，<LineString>
元素會顯示為折線，而 <Polygon> 元素則會顯示為多邊形。同樣地，
<GroundOverlay> 元素在地圖上會以矩形圖片形式呈現。但請注意，這些物件都不是
Google Maps API 的 Marker、Polyline、Polygon或 GroundOverlay，而是在地圖上
以單一物件形式呈現

21. Basic flow (JavaScript V3) – 16
 分佈圖圖層
 本節所述概念僅適用於 google.maps.visualization 程式庫所提供的功能
 「分佈圖圖層」可用於在用戶端呈現「分佈圖」。 分佈圖是一種視覺效果，用於偵測不同地理位置的資料
濃度。「分佈圖圖層」啟用時，地圖上方會顯示一個彩色疊加層。根據預設，濃度越高的區域會塗上紅色，
而濃度較低的區域會顯示為綠色。
 google.maps.visualization.HeatmapLayer
 https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
 OR
 Fusion Table 圖層
 https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-query
 Fusion Table 查詢
 Fusion Table 樣式

22. Basic flow (JavaScript V3) – 17
 氣象與雲層圖層
 您可以透過 google.maps.weather 程式庫的 WeatherLayer 和 CloudLayer 類別，在地圖上顯示氣象資
料或雲層圖像。啟用雲層圖層可在地圖上加上雲層覆蓋圖像，縮放等級在 0 到 6 級時均可顯示。啟用氣象
圖層可在地圖上顯示 weather.com 所提供的天氣狀況，包括各種代表晴天、陰天和雨天等的圖示。按一下
特定地區的天氣圖示會開啟提供詳細資料的資訊視窗，例如目前的濕度、風向風速以及未來 4 天的天氣預報。
您可以透過 WeatherMouseEvent 物件的 featureDetails 屬性存取這類詳細資料。下方範例會偵測您點擊
圖示的動作，並顯示該位置目前的溫度
 https://developers.google.com/maps/documentation/javascript/examples/layer-weather
 使用 PanoramioLayer 物件
 將取自 Panoramio 的相片新增為地圖的圖層。PanoramioLayer 在地圖上會以不同大小的相片圖示，呈現
Panoramio 上標有地理位置之相片圖示的圖層。
 https://developers.google.com/maps/documentation/javascript/examples/layer-panoramio

23. Basic flow (JavaScript V3) – 18
 地圖類型
 MapTypeId.ROADMAP 會顯示預設道路地圖檢視畫面
 MapTypeId.SATELLITE 會顯示 Google 地球衛星影像
 MapTypeId.HYBRID 會顯示一般檢視和衛星檢視的混合畫面
 MapTypeId.TERRAIN 會根據地形資訊顯示實際地圖
 45° 圖像
 Google Maps API 可支援特定位置的特殊 45° 圖像。
 https://developers.google.com/maps/documentation/javascript/examples/aerial-simple
 旋轉 45° 圖像
 45° 圖像實際上是由每個基本方向 (東西南北) 的圖片集合所組成。只要地圖顯示 45° 圖像，您即可呼叫 Map 物件上的 setHeading()，並傳送相對於
北方的角度數值，將圖像朝向任一個基本方向。
 https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation
 自訂地圖類型
 第 3 版現在支援自訂地圖類型的顯示與管理，可讓您實作自己的地圖圖像或地圖方塊疊加層。
 https://developers.google.com/maps/documentation/javascript/examples/maptype-image

24. OpenStreetMap API

25. Component overview