Week 7 บาจรีย์

1. Week 7 บาจรีย์ 1
Script Program( Java Script )
วันที่ 15 ก.พ. 2560
Week 7
เรื่อง ทำสำมเหลี่ยม Bermuda ให้ปรำกฏใน google map
เปิดโปรแกรม Edit plus  file  new  HTML page จะได้ ดังภาพ
ในบรรทัดที่ 10,11 เปิดและปิด style ดังภาพ

2. Week 7 บาจรีย์ 2
กาหนดค่าลงไปภายใต้ style  float :
neight :
width :
ดังภาพ
กาหนด html,body ดังภาพ

3. Week 7 บาจรีย์ 3
กาหนดค่าลงไปภายใต้ html,body  height :
margin :
padding :
ดังภาพ
ภายใต้ body ให้เปิดและปิด div  <div id = ‚map‛> </div>

4. Week 7 บาจรีย์ 4
ทาการ เปิด และ ปิด script ดังภาพ
ประกาศ function ภายใน script  function initMaps ( ){ }
ดังภาพ

5. Week 7 บาจรีย์ 5
บรรทัดที่ 27 พิมพ์ var map = new google.maps.Map( ) ดังภาพ
บรรทัดที่ 27 พิมพ์ document.getElementById(‚map‛) ลงไปในส่วนของ วงเล็บที่ว่างไว้

6. Week 7 บาจรีย์ 6
พิมพ์ { } แทรกไป ตามตาแหน่ง ดังภาพ บรรทัดที่ 27
บรรทัดที่ 28 พิมพ์ center : {lat : 24.886 , ing : -70.268} ลงไป ดังภาพ

7. Week 7 บาจรีย์ 7
บรรทัดที่ 29  zoom :
บรรทัดที่ 30 พิมพ์ mapTypeId = ‘terrain’ (เพื่อเป็นการกาหนดการมองเห็นภูมิประเทศในแผนที่)
****เติม ; ในบรรทัดที่ 31****

8. Week 7 บาจรีย์ 8
เปิดโค้ดของ week6 เพื่อ copy key บรรทัดที่ 52-53 มาใช้
Copy แล้มาวางใน บรรทัดที่ 34-35 ดังภาพ

9. Week 7 บาจรีย์ 9
กด Ctrl S เพื่อ save ตั้งชื่อ และ .html ดังภาพ
ไปเปิด ที่บันทึกไว้ใน web browser จะได้ ดังภาพ

10. Week 7 บาจรีย์ 10
เริ่มใส่รูปสำมเหลี่ยงลงในแผนที่
ประกาศ var triangleCoords และใส่ค่าพิกัดแต่ละมุมของ สามเหลี่ยม ที่ต้องการ ดังภาพ
บรรทัดที่ 38 var bermuda = new google.maps.Polygon ({}) ดังภาพ

11. Week 7 บาจรีย์ 11
บรรทัดที่ 39 กาหนด paths (ตาแหน่งของ polygon)
เข้าไป ในค้นหาใน google ว่า html color code เพื่อดูโค้ด สี ที่จะมาวางใน stroke ดังภาพ

12. Week 7 บาจรีย์ 12
strokeColor คือ การกาหนดสีของเส้น
strokeOpacity คือ ความโปร่งแสงของเส้น

13. Week 7 บาจรีย์ 13
strokeWeight คือ การกาหนดความหนาของเส้น
fillColor คือ การกาหนดสีของ polygon ที่ทา

14. Week 7 บาจรีย์ 14
fillOpacity คือ การกาหนดความโปร่งแสงของ polygon ที่ทา
บรรทัดที่ 46 bermuda.setmap(map); คือ การเอาสามเหลี่ยมที่ทาไปไว้บนแผนที่

15. Week 7 บาจรีย์ 15
กด Ctrl s และไป รีเฟรช ที่หน้า web browser อีกครั้ง จะได้ ดังภาพ