Week4 duangkamon

1. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
Week 4 เรื่อง Google Map Api Javascript
1. เข้าไปที่ Google พิมพ์Google Map Api Javascript แล้วกดค้นหา จะเจอเว็บแรก
2.ทาการ Log in เนื่องจาก Google Map Api Javascript ทางานภายใต้Google

2. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
3. คลิก GET A KEY
4. คลิก CREAGE AND ENABLE API

3. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
5. จะขึ้น Code เว็บไซต์ ให้บันทึกไว้เพื่อใช้ต่อไปในสัปดาห์หน้า
AIzaSyBsWxTox4MQ_VISOUStL7zhmWsUoiurNvs
6. นา Code ไปวางที่ Edit Plus

4. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
7. กด Ctrl + New หน้าทางานใหม่
8. กลับไปที่ Google Map Api Javascript เราจะใช้ภาพถ่ายทาง Google คลิกที่ Samples
แล้วคลิกที่ Simple Map

5. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
9. จะขึ้นแผนที่แสดงประเทศออสเตรเลีย
10. เลื่อนลงด้านล่างเราจะเจอ Code ของแผนที่ออสเตรเลีย Copy ทั้งหมดนาไปวางใน Edit Plus

6. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
11. วาง Code ใน Edit Plus
12. Copy Code รหัสที่เราบันทึกไว้เพื่อนาไปอ้างอิงใน Code ประเทศออสเตรเลีย

7. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
13. นา Code มาวางในบรรทัดที่ 32 หลังเครื่องหมาย = ดังภาพด้านบน
14. เมื่อวาง Code แล้ว ทาการ Save ให้เรียบร้อย

8. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
15. เข้าไปเปิดเว็บของเราที่ได้ Save ไว้
16. เมื่อเปิดแล้วจะปรากฏแผนที่ ดังภาพด้านบน

9. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
17. ด้านบนของแผนที่ เมื่อคลิก แผนที่ จะแสดง Terrian แผนที่ภูมิประเทศ ภาพนี้มาจากบรรทัดที่ 27
จาก ค่าละติจูด และลองจิจูด
18. เมื่อคลิก ดาวเทียม จะเป็นภาพแผนที่ภูมิประเทศจากดาวเทียม

10. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
19. ทาการซูมหา โรงอุปรากรซิดนีย์
20. ทดสอบการ Street View ดูสภาพแวดล้อมของเมือง

11. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
21. ถ้าต้องการไปที่ประเทศไทยก็ทาได้เพียงไปที่บรรทัดที่ 27 ใส่ค่าละติจูด และลองจิจูด
22. กด Reface หน้าเว็บไซต์ จะแสดงแผนที่มาที่ประเทศไทย

12. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
23. ถ้าต้องการไปที่มหาวิทยาลัยบูรพาก็ทาได้เพียงไปที่บรรทัดที่ 27 ใส่ค่าละติจูด และลองจิจูด
24. และปรับการซูม ไปที่ 15

13. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
25. กด Reface หน้าเว็บไซต์ จะแสดงแผนที่มหาวิทยาลัยบูรพา
26. ในบรรทัดที่ 10 #map ตามด้วย height : 100% คือ แสดงผล Full เต็มทั้งหน้าจอ แต่ถ้าเป็น 50% จะครึ่ง
หน้าจอ

14. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
27. height : 50% คือ แสดงผลครึ่งหนึ่งของหน้าจอ
28. height : 50%; คือ ส่วนบนของแผนที่ เรียกว่า head เป็นการปรับ Style ในส่วนของ head
margin : 15%; คือ ระยะห่างด้านบนเป็นการใส่กรอบให้มัน
padding : 20%; คือ การเว้นวรรคข้างหน้า

15. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
29. จากข้อ 28 เมื่อกด Reface หน้าเว็บไซต์จะแสดงดังภาพ ให้ทาการปรับเป็น height : 100%;
margin : 0%; และpadding : 0%;
30. บรรทัดที่ 22 div เป็นฟังก์ชันที่สาคัญมากในการแสดงผลบนหน้าจอ เป็นการนาค่าจา initmap มาแสดง
บนหน้าจอ

16. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
31. มาในส่วนของคาสั่งของ Javascript ประกาศตัวแปร var และการใช้ function initmap คือ การตั้งค่าตั้งต้น
ใน Google Map เป็นการปับแต่งแผนที่
32. บรรทัดที่ 10 #mapping เป็นชื่อเรียก ถ้าต้องการเปลี่ยน ต้องเปลี่ยนทั้งหมด 5 จุดด้วยกัน

17. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
33. การเปลี่ยนชื่อเรียกอีก 4 จุด ดังภาพด้านบน
34. กด Reface หน้าเว็บไซต์ จะแสดงแผนที่ขึ้นมาแบบเต็มจอ