Week5 duangkamon

1. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
Week 5 เรื่อง Marker ปักหมุดลงแผนที่
1. เปิด Code ของสัปดาห์ที่แล้วขึ้นมา AIzaSyBsWxTox4MQ_VISOUStL7zhmWsUoiurNvs ในโปรแกรม
EditPlus
2. ทาการ Log in เนื่องจาก Google Map Api Javascript ทางานภายใต้Google และคลิกที่ Samples
แล้วคลิกที่ Simple Map

2. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
3. เลื่อนลงด้านล่างเราจะเจอ Code ของแผนที่ออสเตรเลีย Copy ทั้งหมดนาไปวางใน Edit Plus
4. Copy Code รหัสที่เราบันทึกไว้เพื่อนาไปอ้างอิงใน Code ประเทศออสเตรเลีย นา Code มาวางในบรรทัด
ที่ 32 หลังเครื่องหมาย = ดังภาพด้านบน

3. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
5. วาง Code ให้เรียบร้อย
6. .ในบรรทัดที่ 27 เราจะให้แผนที่แสดงมาที่จังหวัดชลบุรี ทาการแก้ไขพิกัด

4. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
7. พิกัดจังหวัดชลบุรีให้แก้ไข ดังภาพด้านบน
8. ทาการ Save ให้เรียบร้อย

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

6. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
11. กด Reface หน้าเว็บไซต์ จะแสดงแผนที่มาที่มหาวิทยาลัยบูรพา
12. ลบบรรทัดที่ 24 ออก

7. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
13. เติม var หน้า map ในบรรทัดที่ 26
14. กด Enter มาทางานในบรรทัดที่ 29 โดยพิมพ์ var maker1=new google.maps.Marker({})

8. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
15. กด Enter มาทางานในบรรทัดที่ 30 โดยพิมพ์
position :
{lat:13.277383,lng:100.925864},
16. Copy คาสั่ง Code ในบรรทัดที่ 29ถึง 34 เพื่อเพิ่มอีกหนึ่งหมุดลงในแผนที่

9. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
17. วาง Code ในบรรทัดที่ 35 เปลี่ยนชื่อเป็นชื่อ maker2 ในบรรทัดที่ 35 และสีค่าพิกัดของ
ต.แสนสุข จ.ชลบุรี
18. ปรับการซูมในบรรทัดที่ 27 เป็นระดับ 14

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

11. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
21. เปิดหน้าการทางานใหม่ที่ 3 ทาการเปลี่ยนหมุดเพิ่มสีสันให้กับ Icon เริ่มจาก Copy Code จาก Facebook
มาวาง
22. จากนั้นไป Copy Code ของเราใน Week 5

12. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
23. นา Code ของเรามาวางในบรรทัดที่ 67
24. Enter ทางานในบรรทัดที่ 29 โดยพิมพ์ maptypeId’roadmap’

13. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
25. ในบรรทัดที่ 31 คือ URL Icon
26. Copy ไปวางที่ค้นหา google หา icon var icon Base ไว้เก็บเว็บไซต์

14. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
27. เมื่อ Reface จะได้ผลลัพธ์ Icon ดังภาพตาม Icon ที่เราเลือก
28. var features ในบรรทัดที่ 50 เติม s เพราะเก็บสถานที่ไว้มากกว่า 1 จุด

15. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
29. หน้าต่างที่อยู่ URL ของ Icon ต่างๆ นาไปวางในบรรทัดที่ 31