1. Google Maps API http://MobileDev.TW
GOOGLE MAPS
JAVASCRIPT API V3
1
Ryan@MobileDev.TW

2. Google Maps API http://MobileDev.TW
HTML5：取得地理位置
1. 建立一顆按鈕，按下去之後開始動作
2. 確認是否有支援地理位置抓取
3. 呼叫取得地理位置的方法
• 設定成功取得位置後要做的事情
• 設定取得位置失敗要做的事情
navigator.geolocation.getCurrentPosition
(successCallback, errorCallback);
2

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. Google Maps API http://MobileDev.TW
不斷更新現在位置
• 改用navigator.geolocation.watchPosition
• 可持續取得位置
• 不用時呼叫clearWatch
• window.navigator.geolocation.clearWatch( watc
hPositionObject )
4

5. Google Maps API http://MobileDev.TW
Hello! Map!
5

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. Google Maps API http://MobileDev.TW
新版介面
APIs - Google Maps JavaScript API - Enable API
7

8. Google Maps API http://MobileDev.TW
Hello! Map
4. 點選左邊的API Access
5. 取得API Key
8

9. Google Maps API http://MobileDev.TW
新版介面
Credentials - Create new Key - Browser key
9

10. Google Maps API http://MobileDev.TW
Hello! Map
10

11. Google Maps API http://MobileDev.TW
Hello! Map
6. 將api key填上，以及設定sensor為true或false
7. 打開網頁測試
11

12. Google Maps API http://MobileDev.TW
Hello! Map
• 地圖中心點：center
• 地圖縮放大小：zoom
• 地圖型態：mapTypeId
• ROADMAP
• SATELLITE
• HYBRID
• TERRAIN
12

13. Google Maps API http://MobileDev.TW
以目前位置為中心點
13

14. Google Maps API http://MobileDev.TW
以目前位置為中心點
1.初始化時先取得目前位置
14

15. Google Maps API http://MobileDev.TW
以目前位置為中心點
5. 將拿到的位置，設定在Google的LatLng物件，並
拿來指定為地圖中心點
15

16. Google Maps API http://MobileDev.TW
在地圖上加上標記
16

17. Google Maps API http://MobileDev.TW
在地圖上加上標記
• position：經緯度位置
• map：顯示在哪一張地圖上
• title：滑鼠移過去會顯示
17

18. Google Maps API http://MobileDev.TW
自定圖示
18

19. Google Maps API http://MobileDev.TW
自定圖示
• 在Marker物件中增加icon屬性，直接給圖片路徑
19

20. Google Maps API http://MobileDev.TW
按下圖標後的行為
20

21. Google Maps API http://MobileDev.TW
按下圖標後的行為
21
圖標支援的事件：
click、dblclick、mouseup、mousedown、
mouseover、mouseout

22. Google Maps API http://MobileDev.TW
InfoWindow
22

23. Google Maps API http://MobileDev.TW
InfoWindow
23