Study mapapi v0.1

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

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)

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)

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

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

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

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

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()

控制項
停用預設使用者介面
請將 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

設定自訂控制項位置
 您可透過 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

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

 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"});

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

 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/

 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

 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

 自訂疊加層
 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() 方法，清除您在疊加層中添加的任何元素。

 圖層
 是指地圖上由一或多個個別項目所組成的物件，但可視為單一單元進行操作。圖層通常會反映您新增
至地圖上方的物件集，以指定共通的關聯性。隨著地圖檢視區的改變，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 程式庫提供。

 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，而是在地圖上
以單一物件形式呈現

 分佈圖圖層
 本節所述概念僅適用於 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 樣式

 氣象與雲層圖層
 您可以透過 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

 地圖類型
 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

Study mapapi v0.1

Recommended

More Related Content

Viewers also liked (20)

Similar to Study mapapi v0.1 (20)

More from Paul Yang (18)

Study mapapi v0.1

Editor's Notes