Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,217 views

Published on

It's a NTHU Course Slide

Published in: Technology, Education
  • Be the first to comment

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

×