google map slide
DESCRIPTION
It's a NTHU Course SlideTRANSCRIPT
![Page 1: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/1.jpg)
Google MapRonald Hsu 100062595 @ MIRLab
h7p://about.me/hothero20120417
1
12年4月17日星
![Page 2: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/2.jpg)
Outline
¢Google Map �Closure�Func5onal programming�Assignment�Related Applica5ons DEMO
¢Javascript Encoder & Packer
2
12年4月17日星
![Page 3: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/3.jpg)
Google Map v3
¢Client Loca5on
¢Direc5ons
¢GeoCoder
¢Marker¢Event
3
12年4月17日星
![Page 4: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/4.jpg)
Get Started
4
include external javascript
CSS(Op5onal)
12年4月17日星
![Page 5: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/5.jpg)
google.maps.LatLng
¢latLng = new google.maps.LatLng(la5tude, longitude); // ini5aliza5on
¢Some methods�equals(other:LatLng) // comparison func5on� lat()� lng()� toString(): "(-‐34.397, 150.644)"� toUrlValue(precision?:number): "-‐34.397,150.644"
¢DEMO: h`p://goo.gl/iE7YY5
12年4月17日星
![Page 6: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/6.jpg)
MapType
6
12年4月17日星
![Page 7: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/7.jpg)
Client Loca5on
¢Add another external javascript library or use another sample from “Code Samples”�src="h`p://www.google.com/jsapi"
¢Get client loca5on from google.loader and center map to there.
¢DEMO: h`p://goo.gl/NIVU
7
12年4月17日星
![Page 8: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/8.jpg)
google.maps.Marker
¢Some proper5es�anima5on� icon�map�posi5on�5tle�zIndex
¢DEMO: h`p://goo.gl/3PRpO 8
MarkerOp5ons wrapped by braces {}
12年4月17日星
![Page 9: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/9.jpg)
Event
¢Concept:�Closure�Func5onal Programming
¢Sample: place a marker on client loca5on�h`p://mirlab.org/users/ronald.hsu/web_course_demo/clientMarker.html
9
12年4月17日星
![Page 10: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/10.jpg)
JS Advanced Concept
¢Closure�Wikipedia: In computer science, a closure (also lexical closure or func5on closure) is a func5on together with a referencing environment for the non-‐local variables of that func5on. [1] A closure allows a func5on to access variables outside its immediate lexical scope.
¢Func5onal Programming�Extended Reading: h`p://www.slideshare.net/ihower/fp-‐osdc2012v2
10
12年4月17日星
![Page 11: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/11.jpg)
Closure & Func5onal Programming
¢fffff
¢h`p://jsfiddle.net、h`p://jsbin.com/11
Closure
Func5onal Programming
Call by reference
12年4月17日星
![Page 12: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/12.jpg)
Closure(Cont.)
12
Call by reference
h`p://goo.gl/X`HA
12年4月17日星
![Page 13: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/13.jpg)
Func5onal Programming(Cont.)
13
Rename this func5onCall by func5on
12年4月17日星
![Page 14: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/14.jpg)
Func5onal Programming(Cont.)
14¢More: Node.js 、Meteor(Server-‐side)
Callback func5on
Anonymous Func5on
12年4月17日星
![Page 15: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/15.jpg)
Google Map v3(Cont.)
¢Direc5ons¢GeoCoder
15
12年4月17日星
![Page 16: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/16.jpg)
¢My version:
¢DEMO: h`p://goo.gl/v8AtJ
DOMListener & GeoCoder
16
12年4月17日星
![Page 17: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/17.jpg)
¢DEMO: h`p://goo.gl/zfvkk
Direc5on / Route
17
BICYCLING, WALKING
For showing (or polyline)
12年4月17日星
![Page 19: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/19.jpg)
Reference Usage (Other parts of GMap)
¢h`ps://developers.google.com/maps/¢Developer’s Guide�Services�Libraries
¢API Reference¢Code Samples & More Resources(Advanced)¢Another alterna5ve: an open source project “OpenStreetMap”
19
12年4月17日星
![Page 20: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/20.jpg)
Assignment
¢h`p://mirlab.org/users/ronald.hsu/web_course_demo/homework.html
20
12年4月17日星
![Page 21: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/21.jpg)
Dic5onary / Hash Table
21
var ipeen_hsinchu = {};ipeen_hsinchu[0] = {};ipeen_hsinchu[0]["name"] = "均鎂糕餅公司";ipeen_hsinchu[0]["address"] = "新竹縣竹北市文平路302號";
var a = {};a[0] = {"name": "test", "number": 3};alert(a[0].number);
1
2
12年4月17日星
![Page 22: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/22.jpg)
DEMO
¢Joytrip¢Spotmap¢Anyweather�h`p://anyweather.hothero.org/
22
12年4月17日星
![Page 23: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/23.jpg)
Javascript encoder
¢h`p://dean.edwards.name/packer/ 、 h`p://javascriptcompressor.com/�Prac5cally
¢h`p://uv-‐8.jp/public/aaencode.html�For fun
¢More: h`p://goo.gl/JKvqC¢Keyword: Obfuscator, obfusca5on, compiler, encoder, ... etc.
23
12年4月17日星
![Page 24: Google map slide](https://reader035.vdocument.in/reader035/viewer/2022062702/554be5a3b4c90556328b4a85/html5/thumbnails/24.jpg)
Thanks for your listening
¢Q & A
24
12年4月17日星