Google Map            1   Ronald	  Hsu	  100062595	  @	  MIRLab                h7p://about.me/hothero                     ...
Outline    ¢Google	  Map	        — Closure      — Func5onal	  programming      — Assignment      — Related	  Applica5...
Google	  Map	  v3 ¢Client	     Loca5on ¢Direc5on   s ¢GeoCode   r ¢Marker ¢Event                          312年4月17日星
Get	  Started                     CSS(Op5onal)                      include	  external	  javascript	                      ...
google.maps.LatLng    ¢latLng	  =	  new	  google.maps.LatLng(la5tude,	        longitude);	  	  	  //	  ini5aliza5on    ¢...
MapType              612年4月17日星
Client	  Loca5on    ¢Add	  another	  external	  javascript	  library	  or	  use	        another	  sample	  from	  “Code	 ...
google.maps.Marker                                     MarkerOp5ons	                                      wrapped	  by	  b...
Event    ¢Concept:      — Closure      — Func5onal	  Programming    ¢Sample:	  place	  a	  marker	  on	  client	  loca...
JS	  Advanced	  Concept    ¢Closure      — Wikipedia:	  In	  computer	  science,	  a	  closure	  (also	  lexical	       ...
Closure	  &	  Func5onal	  Programming    ¢fffff                                 Closure    Call	  by	      reference       ...
Closure(Cont.)  h`p://goo.gl/X`HA                      Call	  by	  reference                                              ...
Func5onal	  Programming(Cont.)                                       Rename	                 Call	  by	  func5on   this	  ...
Func5onal	  Programming(Cont.)                                         Anonymous	                                         ...
Google	  Map	  v3(Cont.)¢Direc5ons¢GeoCoder                                 1512年4月17日星
DOMListener	  &	  GeoCoder    ¢My	  version:    ¢DEMO:	  h`p://goo.gl/v8AtJ   1612年4月17日星
Direc5on	  /	  Route                                  BICYCLING,	  WALKING             For	  showing	  (or	  polyline)    ...
MarkerCluster    ¢DEMO:	  h`p://goo.gl/8iWs                                   1812年4月17日星
Reference	  Usage	  (Other	  parts	  of	  GMap)    ¢h`ps://developers.google.com/maps/    ¢Developer’s	  Guide      — S...
Assignment    ¢h`p://mirlab.org/users/ronald.hsu/      web_course_demo/homework.html                                     ...
Dic5onary	  /	  Hash	  Table 1     var	  ipeen_hsinchu	  =	  {};     ipeen_hsinchu[0]	  =	  {};     ipeen_hsinchu[0]["name...
DEMO    ¢Joytrip    ¢Spotmap    ¢Anyweather      — h`p://anyweather.hothero.org/                                      ...
Javascript	  encoder    ¢h`p://dean.edwards.name/packer/	  、	  h`p://      javascriptcompressor.com/      — Prac5cally  ...
Thanks	  for	  your	  listening	      ¢Q	  &	  A                                             2412年4月17日星
Upcoming SlideShare
Loading in …5
×

Google map slide

1,175 views

Published on

It's a NTHU Course Slide

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Google map slide

  1. 1. Google Map 1 Ronald  Hsu  100062595  @  MIRLab h7p://about.me/hothero 2012041712年4月17日星
  2. 2. Outline ¢Google  Map   — Closure — Func5onal  programming — Assignment — Related  Applica5ons  DEMO ¢Javascript  Encoder  &  Packer 212年4月17日星
  3. 3. Google  Map  v3 ¢Client   Loca5on ¢Direc5on s ¢GeoCode r ¢Marker ¢Event 312年4月17日星
  4. 4. Get  Started CSS(Op5onal) include  external  javascript   412年4月17日星
  5. 5. 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/iE7YY 512年4月17日星
  6. 6. MapType 612年4月17日星
  7. 7. 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 712年4月17日星
  8. 8. google.maps.Marker MarkerOp5ons   wrapped  by  braces  {} ¢Some  proper5es — anima5on — icon — map — posi5on — 5tle — zIndex ¢DEMO:  h`p://goo.gl/3PRpO 812年4月17日星
  9. 9. Event ¢Concept: — Closure — Func5onal  Programming ¢Sample:  place  a  marker  on  client  loca5on — h`p://mirlab.org/users/ronald.hsu/ web_course_demo/clientMarker.html 912年4月17日星
  10. 10. 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 1012年4月17日星
  11. 11. Closure  &  Func5onal  Programming ¢fffff Closure Call  by   reference Func5onal   Programming ¢h`p://jsfiddle.net、h`p://jsbin.com/ 1112年4月17日星
  12. 12. Closure(Cont.) h`p://goo.gl/X`HA Call  by  reference 1212年4月17日星
  13. 13. Func5onal  Programming(Cont.) Rename   Call  by  func5on this  func5on 1312年4月17日星
  14. 14. Func5onal  Programming(Cont.) Anonymous   Func5on Callback  func5on ¢More:  Node.js  、Meteor(Server-­‐side) 1412年4月17日星
  15. 15. Google  Map  v3(Cont.)¢Direc5ons¢GeoCoder 1512年4月17日星
  16. 16. DOMListener  &  GeoCoder ¢My  version: ¢DEMO:  h`p://goo.gl/v8AtJ 1612年4月17日星
  17. 17. Direc5on  /  Route BICYCLING,  WALKING For  showing  (or  polyline) ¢DEMO:  h`p://goo.gl/zfvkk 1712年4月17日星
  18. 18. MarkerCluster ¢DEMO:  h`p://goo.gl/8iWs 1812年4月17日星
  19. 19. 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” 1912年4月17日星
  20. 20. Assignment ¢h`p://mirlab.org/users/ronald.hsu/ web_course_demo/homework.html 2012年4月17日星
  21. 21. Dic5onary  /  Hash  Table 1 var  ipeen_hsinchu  =  {}; ipeen_hsinchu[0]  =  {}; ipeen_hsinchu[0]["name"]  =  "均鎂糕餅公司"; ipeen_hsinchu[0]["address"]  =  "新竹縣竹北市文平路302號"; 2 var a = {}; a[0] = {"name": "test", "number": 3}; alert(a[0].number); 2112年4月17日星
  22. 22. DEMO ¢Joytrip ¢Spotmap ¢Anyweather — h`p://anyweather.hothero.org/ 2212年4月17日星
  23. 23. 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. 2312年4月17日星
  24. 24. Thanks  for  your  listening   ¢Q  &  A 2412年4月17日星

×