Google Maps API 
應⽤用篇 
kuro 2014/08/22
Agenda 
• Google Maps Features 
• Google Maps application showcase
Google Maps Features 
• 簡單⽽而熟悉的操作介⾯面 
• 世界級的圖像技術 
• ⾏行動優先
Google Maps Features 
• 簡單⽽而熟悉的操作介⾯面 
• 世界級的圖像技術 
• ⾏行動優先 
以上都是 Google Maps 官網上寫的 
資料來源:http://www.google.com/intx/zh-­‐TW...
Google Maps Features 
• 基本地圖 
• 衛星 
• 街景 
• 定位及地標 
• 導航 
• 資料圖像化
https://developers.google.com/maps/documentation/javascript/examples/map-­‐simple?hl=zh-­‐tw
https://developers.google.com/maps/documentation/javascript/examples/control-­‐custom?hl=zh-­‐tw
https://www.google.com.tw/maps/@25.044079,121.520281,3a,75y,355.77h,89.05t/ 
data=!3m5!1e1!3m3!1s9qtVMs_T4KAAAAGu4ubXug!2e...
https://developers.google.com/maps/documentation/javascript/examples/map-­‐geolocation?hl=zh-­‐tw
http://www.morethanamap.com/demos/places
https://developers.google.com/maps/documentation/javascript/examples/overlay-­‐simple?hl=zh-­‐tw
http://google-­‐maps-­‐utility-­‐library-­‐v3.googlecode.com/svn/trunk/markerclustererplus/examples/ 
advanced_example.htm...
https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-­‐tw
https://developers.google.com/maps/documentation/javascript/examples/layer-­‐heatmap?hl=zh-­‐tw
https://developers.google.com/maps/documentation/javascript/examples/layer-­‐weather?hl=zh-­‐tw
http://www.morethanamap.com/demos/visualization/flights
http://www.morethanamap.com/demos/visualization/population
Google Maps 
Application Showcase
水慈善(Charity: Water) 
http://www.charitywater.org/projects/completed-projects/ 
‧ 2006 年成立的非營利組織, 
期許將安全乾淨的水資源帶 
到發展中國家。 
‧...
Epungo 
http://www.epungo.com 
‧來自巴西的房地產網站 
‧簡易的操作界面與豐富的功能著名
http://www.blitzer.de/karte 
‧原為測速照相偵測提醒 
App,網站版本僅提供路段 
限速資訊查詢。 
‧德文網站。 
‧ 有與 Garmin 合作。 
blitzer.de
Zeit online 
http://www.zeit.de/datenschutz/malte-spitz-vorratsdaten 
‧ 德國新聞網站專題頁。 
‧ 將行動電信業者收集到的資 
訊,以視覺圖像化的方式,在 
Google ...
Fluchtplan ins Grüne 
https://insgruene.withgoogle.com/ 
‧ 也是德文網站。 
‧ 網站使用 HTML5 技術,得到 
使用者目前所在地點,查出鄰 
近的公園景點所在地,並規劃 
路徑及計...
Taxi Trails 
http://www.taxitrails.se/en 
‧ 集結了斯德哥爾摩計程車的 
GPS 軌跡,運用這些資料結 
合 Google Maps 推出了觀光 
地圖。 
‧ 除了景點和餐廳資訊外,也可 
直接在線上...
Strava Global Heatmap 
http://labs.strava.com/heatmap/ 
‧ 網站結合了 Google Maps 將全 
球所有熱門的慢跑和自行車路線 
以 Heatmap 的方式標示。 
‧ 提供選項調整...
Wind Animation 
http://esri.github.io/wind-js/ 
‧ 由 ESRI (美國環境系統研究所 
公司) 製作的全球風向動態 
圖。 
‧ 網站使用 HTML5 Canvas 繪 
圖技術。
Google Map - Silent Hill 
http://silenthill3d.com/map/ 
‧ 利用街景模式呈現電影當中所 
出現的場景,點選地圖上的紅 
色打點再選取『Street 
View』,除了看到街景圖 
外,還會...
CrimeMap.info 犯罪地圖 
http://www.crimemap.info/ 
‧ 由澳洲昆士蘭洲警局提供的犯罪 
資料,結合 Google Maps 製作 
犯罪地圖,從地圖上可以查詢鄰 
近的犯罪事件類型並得知目前解 
決狀況...
Uniform Map 制服地圖 
http://uniform.wingzero.tw/ 
‧ Uniform Map 是一個讓你可以 
從地圖去看學校制服的網站。 
‧ 可以切換台灣與香港地區。 
‧ 幾乎都是女生 (y)
foundi 房地資訊實驗室 
http://www.foundi.info/lab/ 
‧ 提供多種房地資訊的圖 
像化搭配 google 地圖顯 
示。
好房生活圈 
‧ 集結生活圈周圍的生活圈資訊, 
包含網友的生活經驗分享、地 
點評價、留言討論、在地設施、 
特輯報導、在地新聞及在地物 
件。 
‧ 已結束維護。
More… 
https://maps.google.com/gallery/
Q & A 
• 好的操作界⾯面即使語⾔言不通也能很好⽤用 
• 上述網站僅供 PM 們作為功能參考 
• 所⾒見 不等於 即所得 T_T
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Google Maps Api 應用篇
Upcoming SlideShare
Loading in...5
×

Google Maps Api 應用篇

3,823

Published on

Google maps apps 應用介紹 for PM,沒有程式碼。

Published in: Software

Google Maps Api 應用篇

  1. 1. Google Maps API 應⽤用篇 kuro 2014/08/22
  2. 2. Agenda • Google Maps Features • Google Maps application showcase
  3. 3. Google Maps Features • 簡單⽽而熟悉的操作介⾯面 • 世界級的圖像技術 • ⾏行動優先
  4. 4. Google Maps Features • 簡單⽽而熟悉的操作介⾯面 • 世界級的圖像技術 • ⾏行動優先 以上都是 Google Maps 官網上寫的 資料來源:http://www.google.com/intx/zh-­‐TW/enterprise/mapsearth/products/mapsapi.html
  5. 5. Google Maps Features • 基本地圖 • 衛星 • 街景 • 定位及地標 • 導航 • 資料圖像化
  6. 6. https://developers.google.com/maps/documentation/javascript/examples/map-­‐simple?hl=zh-­‐tw
  7. 7. https://developers.google.com/maps/documentation/javascript/examples/control-­‐custom?hl=zh-­‐tw
  8. 8. https://www.google.com.tw/maps/@25.044079,121.520281,3a,75y,355.77h,89.05t/ data=!3m5!1e1!3m3!1s9qtVMs_T4KAAAAGu4ubXug!2e0!3e11
  9. 9. https://developers.google.com/maps/documentation/javascript/examples/map-­‐geolocation?hl=zh-­‐tw
  10. 10. http://www.morethanamap.com/demos/places
  11. 11. https://developers.google.com/maps/documentation/javascript/examples/overlay-­‐simple?hl=zh-­‐tw
  12. 12. http://google-­‐maps-­‐utility-­‐library-­‐v3.googlecode.com/svn/trunk/markerclustererplus/examples/ advanced_example.html
  13. 13. https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-­‐tw
  14. 14. https://developers.google.com/maps/documentation/javascript/examples/layer-­‐heatmap?hl=zh-­‐tw
  15. 15. https://developers.google.com/maps/documentation/javascript/examples/layer-­‐weather?hl=zh-­‐tw
  16. 16. http://www.morethanamap.com/demos/visualization/flights
  17. 17. http://www.morethanamap.com/demos/visualization/population
  18. 18. Google Maps Application Showcase
  19. 19. 水慈善(Charity: Water) http://www.charitywater.org/projects/completed-projects/ ‧ 2006 年成立的非營利組織, 期許將安全乾淨的水資源帶 到發展中國家。 ‧ 每建置一口泉井即透過 GPS 定位標示在地圖上,利用照 片、影音告訴捐款者款項的 用途,並開放追蹤掘井的過 程。
  20. 20. Epungo http://www.epungo.com ‧來自巴西的房地產網站 ‧簡易的操作界面與豐富的功能著名
  21. 21. http://www.blitzer.de/karte ‧原為測速照相偵測提醒 App,網站版本僅提供路段 限速資訊查詢。 ‧德文網站。 ‧ 有與 Garmin 合作。 blitzer.de
  22. 22. Zeit online http://www.zeit.de/datenschutz/malte-spitz-vorratsdaten ‧ 德國新聞網站專題頁。 ‧ 將行動電信業者收集到的資 訊,以視覺圖像化的方式,在 Google 地圖中標示出來。 ‧ 在當時引發了電信業者收集資 訊與個人隱私的爭論。
  23. 23. Fluchtplan ins Grüne https://insgruene.withgoogle.com/ ‧ 也是德文網站。 ‧ 網站使用 HTML5 技術,得到 使用者目前所在地點,查出鄰 近的公園景點所在地,並規劃 路徑及計算距離。
  24. 24. Taxi Trails http://www.taxitrails.se/en ‧ 集結了斯德哥爾摩計程車的 GPS 軌跡,運用這些資料結 合 Google Maps 推出了觀光 地圖。 ‧ 除了景點和餐廳資訊外,也可 直接在線上預約計程車。
  25. 25. Strava Global Heatmap http://labs.strava.com/heatmap/ ‧ 網站結合了 Google Maps 將全 球所有熱門的慢跑和自行車路線 以 Heatmap 的方式標示。 ‧ 提供選項調整地圖顏色、路線透 明度、慢跑或自行車路線。
  26. 26. Wind Animation http://esri.github.io/wind-js/ ‧ 由 ESRI (美國環境系統研究所 公司) 製作的全球風向動態 圖。 ‧ 網站使用 HTML5 Canvas 繪 圖技術。
  27. 27. Google Map - Silent Hill http://silenthill3d.com/map/ ‧ 利用街景模式呈現電影當中所 出現的場景,點選地圖上的紅 色打點再選取『Street View』,除了看到街景圖 外,還會看到一小段的電影短 片。
  28. 28. CrimeMap.info 犯罪地圖 http://www.crimemap.info/ ‧ 由澳洲昆士蘭洲警局提供的犯罪 資料,結合 Google Maps 製作 犯罪地圖,從地圖上可以查詢鄰 近的犯罪事件類型並得知目前解 決狀況。
  29. 29. Uniform Map 制服地圖 http://uniform.wingzero.tw/ ‧ Uniform Map 是一個讓你可以 從地圖去看學校制服的網站。 ‧ 可以切換台灣與香港地區。 ‧ 幾乎都是女生 (y)
  30. 30. foundi 房地資訊實驗室 http://www.foundi.info/lab/ ‧ 提供多種房地資訊的圖 像化搭配 google 地圖顯 示。
  31. 31. 好房生活圈 ‧ 集結生活圈周圍的生活圈資訊, 包含網友的生活經驗分享、地 點評價、留言討論、在地設施、 特輯報導、在地新聞及在地物 件。 ‧ 已結束維護。
  32. 32. More… https://maps.google.com/gallery/
  33. 33. Q & A • 好的操作界⾯面即使語⾔言不通也能很好⽤用 • 上述網站僅供 PM 們作為功能參考 • 所⾒見 不等於 即所得 T_T
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×