google map slide
DESCRIPTION
It's a NTHU Course SlideTRANSCRIPT
Google MapRonald Hsu 100062595 @ MIRLab
h7p://about.me/hothero20120417
1
12年4月17日星
Outline
¢Google Map �Closure�Func5onal programming�Assignment�Related Applica5ons DEMO
¢Javascript Encoder & Packer
2
12年4月17日星
Google Map v3
¢Client Loca5on
¢Direc5ons
¢GeoCoder
¢Marker¢Event
3
12年4月17日星
Get Started
4
include external javascript
CSS(Op5onal)
12年4月17日星
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日星
MapType
6
12年4月17日星
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日星
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日星
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日星
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日星
Closure & Func5onal Programming
¢fffff
¢h`p://jsfiddle.net、h`p://jsbin.com/11
Closure
Func5onal Programming
Call by reference
12年4月17日星
Closure(Cont.)
12
Call by reference
h`p://goo.gl/X`HA
12年4月17日星
Func5onal Programming(Cont.)
13
Rename this func5onCall by func5on
12年4月17日星
Func5onal Programming(Cont.)
14¢More: Node.js 、Meteor(Server-‐side)
Callback func5on
Anonymous Func5on
12年4月17日星
Google Map v3(Cont.)
¢Direc5ons¢GeoCoder
15
12年4月17日星
¢My version:
¢DEMO: h`p://goo.gl/v8AtJ
DOMListener & GeoCoder
16
12年4月17日星
¢DEMO: h`p://goo.gl/zfvkk
Direc5on / Route
17
BICYCLING, WALKING
For showing (or polyline)
12年4月17日星
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日星
Assignment
¢h`p://mirlab.org/users/ronald.hsu/web_course_demo/homework.html
20
12年4月17日星
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日星
DEMO
¢Joytrip¢Spotmap¢Anyweather�h`p://anyweather.hothero.org/
22
12年4月17日星
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日星
Thanks for your listening
¢Q & A
24
12年4月17日星