Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google maps Javascript API v3

1,764 views

Published on

Published in: Technology
  • Be the first to comment

Google maps Javascript API v3

  1. 1. Google Maps API http://MobileDev.TW GOOGLE MAPS JAVASCRIPT API V3 1 Ryan@MobileDev.TW
  2. 2. Google Maps API http://MobileDev.TW HTML5:取得地理位置 1.  建立一顆按鈕,按下去之後開始動作 2.  確認是否有支援地理位置抓取 3.  呼叫取得地理位置的方法 •  設定成功取得位置後要做的事情 •  設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition (successCallback, errorCallback); 2
  3. 3. Google Maps API http://MobileDev.TW 結合Google Map(網站)顯示地理位置 LabI.產生超連結 •  取得經度與緯度的值 •  組合出google map的連結 •  https://maps.google.com.tw/ •  ?q=latValue+,+lonValue 3 LabII.直接去Google Map •  提示:改變目前視窗的網址
  4. 4. Google Maps API http://MobileDev.TW 不斷更新現在位置 •  改用navigator.geolocation.watchPosition •  可持續取得位置 •  不用時呼叫clearWatch •  window.navigator.geolocation.clearWatch( watc hPositionObject ) 4
  5. 5. Google Maps API http://MobileDev.TW Hello! Map! 5
  6. 6. Google Maps API http://MobileDev.TW Hello! Map 1.  https://code.google.com/apis/console 2.  點選Services 3.  把Google Maps API v3 打開 6
  7. 7. Google Maps API http://MobileDev.TW 新版介面 APIs - Google Maps JavaScript API - Enable API 7
  8. 8. Google Maps API http://MobileDev.TW Hello! Map 4.  點選左邊的API Access 5.  取得API Key 8
  9. 9. Google Maps API http://MobileDev.TW 新版介面 Credentials - Create new Key - Browser key 9
  10. 10. Google Maps API http://MobileDev.TW Hello! Map 10
  11. 11. Google Maps API http://MobileDev.TW Hello! Map 6.  將api key填上,以及設定sensor為true或false 7.  打開網頁測試 11
  12. 12. Google Maps API http://MobileDev.TW Hello! Map •  地圖中心點:center •  地圖縮放大小:zoom •  地圖型態:mapTypeId •  ROADMAP •  SATELLITE •  HYBRID •  TERRAIN 12
  13. 13. Google Maps API http://MobileDev.TW 以目前位置為中心點 13
  14. 14. Google Maps API http://MobileDev.TW 以目前位置為中心點 1.初始化時先取得目前位置 14
  15. 15. Google Maps API http://MobileDev.TW 以目前位置為中心點 5.  將拿到的位置,設定在Google的LatLng物件,並 拿來指定為地圖中心點 15
  16. 16. Google Maps API http://MobileDev.TW 在地圖上加上標記 16
  17. 17. Google Maps API http://MobileDev.TW 在地圖上加上標記 •  position:經緯度位置 •  map:顯示在哪一張地圖上 •  title:滑鼠移過去會顯示 17
  18. 18. Google Maps API http://MobileDev.TW 自定圖示 18
  19. 19. Google Maps API http://MobileDev.TW 自定圖示 •  在Marker物件中增加icon屬性,直接給圖片路徑 19
  20. 20. Google Maps API http://MobileDev.TW 按下圖標後的行為 20
  21. 21. Google Maps API http://MobileDev.TW 按下圖標後的行為 21 圖標支援的事件: click、dblclick、mouseup、mousedown、 mouseover、mouseout
  22. 22. Google Maps API http://MobileDev.TW InfoWindow 22
  23. 23. Google Maps API http://MobileDev.TW InfoWindow 23

×