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日星

MarkerCluster

¢DEMO:  h`p://goo.gl/8iWs

18

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日星