Enviar búsqueda
Cargar
Google maps Javascript API v3
•
2 recomendaciones
•
1,295 vistas
Ryan Chung
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 23
Recomendados
ALPHABEODESIGN
ALPHABEODESIGN
Bonnou Baku
Elementos de panel de control del sistema operativo
Elementos de panel de control del sistema operativo
july miranda
583 sê tu meu guia
583 sê tu meu guia
SUSSURRO DE AMOR
TIPOS DE FUNCIONES 122
TIPOS DE FUNCIONES 122
almaamayo
Catálogo Zero Grados Jeans / Edición # 10
Catálogo Zero Grados Jeans / Edición # 10
Luz Amparo Cerón
Analyse Stratégique : SHAZAM
Analyse Stratégique : SHAZAM
Léa Lescou
V par craneal
V par craneal
Hector Zavaleta
15 years of Shazam
15 years of Shazam
Ogilvy Consulting
Recomendados
ALPHABEODESIGN
ALPHABEODESIGN
Bonnou Baku
Elementos de panel de control del sistema operativo
Elementos de panel de control del sistema operativo
july miranda
583 sê tu meu guia
583 sê tu meu guia
SUSSURRO DE AMOR
TIPOS DE FUNCIONES 122
TIPOS DE FUNCIONES 122
almaamayo
Catálogo Zero Grados Jeans / Edición # 10
Catálogo Zero Grados Jeans / Edición # 10
Luz Amparo Cerón
Analyse Stratégique : SHAZAM
Analyse Stratégique : SHAZAM
Léa Lescou
V par craneal
V par craneal
Hector Zavaleta
15 years of Shazam
15 years of Shazam
Ogilvy Consulting
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Más contenido relacionado
Más de Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Más de Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Google maps Javascript API v3
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