thunkable

7 6 8. คลกิ Translator_English ลากวางในส่วนของบลอ็ ก 9. เลือก 10. คลกิ TextInput ลากวางในส่วนของบลอ็ ก 11. เลอื ก

12. คลิก Label_ShowText ลากวางในสว่ นของบลอ็ ก 13. เลือก 14. คลกิ result ลากมาวางใน

15. คลกิ Text_to_Speech_English ลากวางในสว่ นของบลอ็ ก 16. เลอื ก 17. คลกิ result ลากมาวางในสว่ นของ

18. คลกิ Control 19. เลอื ก ลากวางในส่วนของบลอ็ กเพื่อสรา้ งเง่อื นไข 20. คลิก Logic 21. เลอื ก ลากวางในส่วนของบลอ็ ก 22. เปลยี่ นเครื่องหมายเป็น

23. คลิก TextInput ลากวางในสว่ นของบล็อก 24. เลือก 25. คลิก Text ลากวางในส่วนของบลอ็ ก 26. เลือก

27. คลิก TextInput ลากวางในสว่ นของบลอ็ ก 28. เลือก 29. คลิก Text ลากวางในส่วนของบล็อก 30. เลอื ก

31. คลิก เปลี่ยนเป็น Thai

Blocks code ของปมุ่ FRENCH 1. คลกิ Button_French ลากวางในสว่ นของบลอ็ ก 2. เลอื ก 3. คลกิ Translator_French

4. เลอื ก ลากวางในส่วนของบลอ็ ก 5. เปล่ียน เปน็ 6. คลกิ Translator_French 7. เลอื ก ลากวางในส่วนของบลอ็ ก 8. เปลี่ยน เปน็ 9. คลิก Translator_French ลากวางในส่วนของบล็อก 10. เลือก

11. คลกิ TextInput ลากวางในส่วนของบล็อก 12. เลือก 13. คลกิ Label_ShowText ลากวางในส่วนของบลอ็ ก 14. เลอื ก

15. คลิก ลากมาวางใน 16. คลกิ Text_To_Speech_French ลากวางในสว่ นของบลอ็ ก 17. เลือก

18. คลกิ ลากมาวางใน 19. คลิก Control 20. เลอื ก ลากวางในส่วนของบลอ็ ก

21. คลกิ Logic 22. เลอื ก ลากวางในสว่ นของบล็อก 23. คลิก เปลีย่ นเครอื่ งหมายเป็น 24. คลิก TextInput ลากวางในสว่ นของ 25. เลอื ก

26. คลกิ Text 27. เลือก ลากวางในสว่ นของ 28. คลิก TextInput ลากวางในสว่ นของบลอ็ ก 29. เลอื ก

30. คลกิ Text ลากวางในส่วนของ 31. เลือก

Blocks code ของปมุ่ KOREAN 1. คลกิ Button_Korean ลากวางในส่วนของบลอ็ ก 2. เลอื ก

3. คลิก Translator_Korean 4. เลือก ลากวางในส่วนของบล็อก 5. เปลยี่ น เป็น 6. คลิก Translator_Korean 7. เลือก ลากวางในสว่ นของบล็อก 8. เปล่ียน เป็น 9. คลิก Translator_Korean ลากวางในส่วนของบลอ็ ก 10. เลือก

11. คลิก TextInput ลากวางในส่วนของบล็อก 12. เลือก 13. คลกิ Label_ShowText ลากวางในส่วนของบลอ็ ก 14. เลือก

15. คลิก ลากมาวางใน 16. คลิก Text_To_Speech_Korean ลากวางในสว่ นของบลอ็ ก 17. เลอื ก

18. คลิก ลากมาวางใน 19. คลิก Control 20. เลอื ก ลากวางในสว่ นของบลอ็ ก

21. คลกิ Logic 22. เลือก ลากวางในสว่ นของบล็อก 23. คลิก เปลยี่ นเครื่องหมายเป็น 24. คลิก TextInput ลากวางในสว่ นของบลอ็ ก 25. เลอื ก

26. คลกิ Text ลากวางในสว่ นของ 27. เลือก 28. คลิก TextInput ลากวางในสว่ นของบลอ็ ก 29. เลอื ก

30. คลกิ Text 31. เลือก ลากวางในส่วนของ



บทที่ 4 การสร้างแอปพลิเคชนั แชทบอทด้วย Dialogflow แอปพลิเคชันแชทบอท เป็นแอปพลิเคชันที่สามารถโต้ตอบสนทนาอัตโนมัติเพื่อวัตถุประสงค์ของการ ให้บริการตอ่ ลูกค้าผ่านช่องทางการสนทนาหรอื การแชท ซึ่งในปจั จุบันเปน็ ทนี่ ิยมต่อการนาไปใช้ทางดา้ นธุรกจิ เชน่ ร้านคา้ ออนไลน์ เพอื่ ช่วยลดเวลาในการตอบคาถามซา ๆ ให้กับร้านค้า คณุ สมบตั ิของแอปพลิเคชนั 1. Dialogflow ส่วนของการสรา้ งระบบโตต้ อบอตั โนมตั ิ 2. Thunkable สว่ นของการสร้างและออกแบบแอปพลิเคชัน 1. Dialogflow Dialogflow คือ แพลตฟอร์มสาหรับพัฒนาระบบโต้ตอบอัตโนมัติ หรือเรียกว่า “Chat-bot” ของ Google ท่ีใช้ Machine Learning มาช่วยทาให้แชทบอทเรียนรู้และโต้ตอบได้อย่างเป็นธรรมชาติ โดยมีจุดเด่นคือ การแปลงคาพดู ของผใู้ ช้ดว้ ยภาษาธรรมชาตใิ ห้เป็นข้อมูลทสี่ ามารถประมวลผลได้ นอกจากนยี ังรองรบั การเชือ่ มต่อ กับ Channel ไดห้ ลากหลาย เช่น Facebook Messenger, Twitter, Line และ Website ของตนเอง  ขน้ั ตอนการลงทะเบียนเขา้ ใช้งาน Dialogflow 1. เข้าเวบ็ Dialogflow.com แล้วคลกิ ปุ่ม GO TO CONSOLE 2. เข้าสรู่ ะบบด้วย Gmail

3. กด ACCEPT เพื่อยนื ยันขอ้ ตกลงในการใชง้ าน  เลือก Yes, I have read and accept the agreement  ขั้นตอนการสรา้ งโปรเจคงาน 1. คลกิ Create Agent เพอ่ื สรา้ งโปรเจค 2. ตงั ชอื่ โปรเจค และเลือกภาษาที่ตอ้ งการสรา้ ง แล้วคลกิ ปุ่ม CREATE  ตังช่อื Agent name เป็น RestaurantBot  เลอื กภาษา Thai-th 3. เมอื่ ทาการสรา้ งโปรเจคงานเสรจ็ แล้วจะปรากฏรปู ดา้ นลา่ ง

 ฟังค์ชั่นด้านซา้ ย จะประกอบไปด้วย o ช่อื โปรเจค สามารถตังค่าต่าง ๆ เช่น เปลี่ยนช่ือโปรเจค, ลบโปรเจค และเขยี นคาอธิบายโปรเจค เปน็ ตน้ o Th ภาษาทใ่ี ชง้ าน สามารถเพ่มิ ภาษาทตี่ ้องการใชง้ านได้ o Intents คือ การสรา้ งตวั ตรวจจับขอ้ ความและการตอบกลับของขอ้ ความ o Entities คือ Metadata ของขอ้ มลู ท่ีตอ้ งการ o Fulfillment คอื การนา API จากภายนอกมาใช้รว่ มกบั ตัว Dialogflow o Integration คือ การนา Intents ท่ีสร้างไปเช่ือมต่อกับ Platform อ่ืน ๆ เช่น Web Demo, Facebook Messenger, Twitter, Line เปน็ ต้น o Training คือ การเพม่ิ Intents ที่ไม่ได้สรา้ งจากสว่ น Intents โดยการ Upload ไฟล์ .txt หรอื .zip เข้ามาใช้งาน o History คอื ประวตั ิการแชทกบั บอท o Analytics คอื การวิเคราะห์ขอ้ มลู ที่แชทกับบอท o Prebuilt Agents คือ การนา Intents ท่ีผู้พัฒนาสร้างขึนมา เพ่ือนามาใช้ งานในการสรา้ งจากส่วน Intents  ข้ันตอนการสร้างแชทบอทด้วย Dialogflow ภาพรวมแอปพลเิ คชัน

1. เลือก Intents แลว้ คลกิ ป่มุ CREATE INTENT เพือ่ สร้างการสนทนา 2. ตงั ชือ่ การสนทนา  ตงั ชอื่ Intent name เป็น Reservation 3. คลกิ ADD TRAINING PHRASES เพื่อสรา้ งตัวตรวจจับขอ้ ความ 4. สร้างข้อความทคี่ าดว่าผใู้ ช้จะสนทนา 5. คลิก ADD RESPONSE เพือ่ สรา้ งการสนทนาตอบกลบั อัตโนมัติ

6. สร้างสนทนาตอบกลับอัตโนมัติ  สวสั ดีคะ่ ร้าน KMUTNB ยินดีตอ้ นรับ ต้องการจองที่สาหรบั กท่ี ่านคะ 7. คลิก Save เพื่อบนั ทกึ การสนทนานี  SAVE สนทนา Reservation 8. สร้างสนทนาตอบกลับถนัดไป หลังจากได้รับการตอบกลับอัตโนมัติจาก AI โดยการคลิก Add follow-up intent ในชอ่ื Reservation(Intent) ที่สร้าง  เลือก Custom 9. เปลี่ยนช่ือสนทนา เพ่ือเข้าใจถงึ บทสนทนาท่ีกระทา  เปลีย่ น Reservation-Custom เปน็ Reservation-noofppl 10. สรา้ งข้อความทคี่ าดว่าผ้ใู ช้จะสนทนา

11. เก็บค่าตัวแปรท่ีได้จาก Training phrases เพ่ิมใน Add output context เพื่อนาไปใช้ในส่วน สนทนาอน่ื ๆ ท่ตี อ้ งการนาคา่ ทไ่ี ดจ้ ากตวั แปรนมี าแสดง  ตังช่ือตวั แปร noofppl ลงใน Add output context 12. สร้างสนทนาตอบกลับอัตโนมตั ิ  สะดวกเปน็ เวลาก่ีโมงคะ 13. คลกิ Save เพื่อบนั ทึกการสนทนานี  SAVE สนทนา Reservation-noofppl 14. สร้างสนทนาตอบกลับถนัดไป โดยการคลิก Add follow-up intent ในบทสนทนาก่อนหนา้  เลือก Custom 15. เปล่ยี นชอื่ สนทนา เพอ่ื เขา้ ใจถงึ บทสนทนาทก่ี ระทา  เปลี่ยน Reservation-noofppl-Custom เป็น Reservation-noofppl-time

16. สร้างข้อความทค่ี าดวา่ ผใู้ ช้จะสนทนา  เลือกชนิดตวั แปรเป็น @sys.time เพื่อนา Format ของเวลามาใช้ 17. เก็บค่าตัวแปรท่ีได้จาก Training phrases เพิ่มใน Add output context เพ่ือนาไปใช้ในส่วน สนทนาอืน่ ๆ ท่ตี อ้ งการนาค่าท่ไี ดจ้ ากตวั แปรนมี าแสดง  ตังช่ือตัวแปร time ลงใน Add output context 18. สร้างสนทนาตอบกลับอัตโนมัติ  ขอทราบชือ่ และเบอร์โทรสาหรับการยนื ยนั ด้วยค่ะ 19. คลกิ Save เพ่ือบันทกึ การสนทนานี  SAVE สนทนา Reservation-noofppl-time

20. สรา้ งสนทนาตอบกลับถนดั ไป โดยการคลิก Add follow-up intent ในบทสนทนาก่อนหน้า  เลอื ก Custom 21. เปลย่ี นชื่อสนทนา เพ่ือเขา้ ใจถึงบทสนทนาท่กี ระทา  เปล่ียน Reservation-noofppl-time-Custom เป็น Reservation-noofppl-time- sumend 22. สรา้ งขอ้ ความทค่ี าดว่าผู้ใชจ้ ะสนทนา  เลอื กชนดิ ตัวแปรช่ือเป็น @sys.given-name เพอื่ นา Format ของชอ่ื มาใช้  เลอื กชนิดตวั แปรเบอร์โทรเปน็ @sys.any ตัวแปรเปน็ อะไรกไ็ ด้  ตงั ชือ่ ตวั แปร Action and parameters o ตังช่อื ตัวแปรเปน็ name ให้กับช่ือ o ตังชอ่ื ตัวแปรเปน็ tel ใหก้ ับเบอร์โทร

23. เพ่ิมตัวแปรทีไ่ ดเ้ ก็บจากสนทนาก่อนหนา้ ใน Add Input context เพือ่ นาค่าท่ไี ด้จากตัวแปรมาใช้ ในบทสนทนานี  เพิ่มตวั แปร noofppl ลงใน Add Input context  เพิ่มตัวแปร time ลงใน Add Input context 24. เรยี กใชต้ ัวแปรจากบทสนทนากอ่ นหนา้ นาค่ามาแสดงทบี่ ทสนทนานี  เพิม่ ชอ่ื ตัวแปร noofppl และ time ลงใน PARAMETER NAME  เพม่ิ ค่าตัวแปรโดยการเรียกใช้ #ชอ่ื ตวั แปร.ชนิดตวั แปร o #noofppl.number o # time.time 25. สร้างสนทนาตอบกลับอัตโนมัติ โดยการเรียกใช้ค่าของตวั แปรท่ีเก็บไวม้ าแสดง  คุณ $name จองโต๊ะสาหรับ $noofppl ท่าน เวลา $time ทางเราจะตดิ ต่อท่ีเบอร์โทร $tel เพอื่ เป็นการยืนยัน ขอบคณุ คะ่  ตังค่า Set this intent as end of conversation เพื่อสินสุดการสนทนา

26. คลิก Save เพื่อบนั ทกึ การสนทนานี 27. เลอื ก Integrations เพอ่ื นา Intent ที่สรา้ งเช่อื มต่อกบั Platform  เลือก Web Demo 28. ทดสอบ Intent ท่สี ร้างเพ่อื นาไปสรา้ งแอปพลเิ คชนั  คลิกลิงค์ URL ท่ไี ด้รบั มา 29. ตังค่าโปรเจค  Upload Logo  เพิม่ คาอธิบายเกีย่ วกบั โปรเจคที่สร้าง

2. Thunkable ขน้ั ตอนการสรา้ งแอปพลิเคชัน 1. สร้าง Project โดยการคลิก Create New App 2. ตังชอื่ โปรเจค Project Name 3. ตังช่ือหนา้ จอแอปพลเิ คชนั Screen1  เลือกหนา้ จอ Design เปน็ Screen1  คลกิ ไอคอน เปลยี่ นชอื่ เปน็ “RestaurantBot” 4. Components เลอื กหมวด User Interface  ลาก Web Viewer ลงหน้าจอ

 เลือกหน้าจอ Design เปน็ Web Viewer  คลิกไอคอน เปลยี่ นช่ือเปน็ Web_Dialogflow 5. คดั ลอก URL จากเว็บ Dialogflow ใส่ URL ในหมวด Simple ของหนา้ Web_Dialogflow 6. ทดสอบแอปพลิเคชัน

บทที่ 5 Hello My Maps 1.การทางานเบือ้ งตน้  Screen1 จะเปน็ หน้าแรกของการแสดงผลเมอ่ื กดปมุ่ Go จะเปลีย่ นไปทหี่ นา้ Screen2  Screen2 จะเป็นหน้าแสดงทอ่ี ยู่ปัจจบุ นั ของคณุ  Screen3 จะเป็นหน้าแสดงแผนท่ขี องแต่ละสถานที่ โดยจะมปี ่มุ ของสถานทีอ่ ยดู่ า้ นบน 2.การทางานของแต่ละหน้า 2.1 Screen1 2.1.1 การออกแบบ

 กดปุ่ม Create New App  ตั้งช่อื App เป็น Hello My Maps แลว้ กด Create  ต้ังค่า BackgroundColor  นา Component ที่ชอื่ Row มาวาง 1. ปรับขนาด Height เปน็ แบบ Fit Contents

 นา Component Label มาใส่ใน Row เปลย่ี นชื่อ Label เป็น LabelHello 1. เปลี่ยนข้อความใน Text เป็น Hello My Maps 2. เปล่ียนสีขอ้ ความเป็น สขี าว 3. ปรับขนาด Font เปน็ แบบ Absolute Size 80 px 4. ปรับขนาด Height เป็นแบบ Absolute Size 100 px  นา Component ท่ชี อื่ Row มาวาง 1. ปรับขนาด Height เปน็ แบบ Absolute Size ขนาด 100 px  นา Component Image มาวาง เพอื่ นารปู Google Maps มาวาง โดยไปท่ี Picture และเลือก Upload Files เลอื กรปู ที่ตอ้ งการ 1. ปรับขนาด Height เปน็ แบบ Absolute Size ขนาด 150 px 2. ปรับขนาด Width เป็นแบบ Absolute Size ขนาด 150 px

 นา Component ทช่ี อ่ื Row มาวาง 1. ปรับขนาด Height เปน็ แบบ Absolute Size ขนาด 60 px  นา Button มาวาง เปล่ียนชื่อปมุ่ เปน็ BtnGo 1. เปลี่ยนข้อความใน Text ของ Button เป็น Go! ปรบั ขนาดขอ้ ความเปน็ 40 px 2. ปรับขนาด Width เป็นแบบ Absolute Size ขนาด 100 px 3. เปล่ยี นสขี อ้ ความเป็น สเี ขยี ว 2.1.2 การโปรแกรม 1. เลือก Block ของ Screen1 2. เลือกชอ่ื BtnGO นา Block when Btn Click มาวาง

3. เลอื กชอื่ Control นาคาสั่ง nevigate to Screen1 มาวางใน Block BtnGo 2.2 Screen2 2.2.1 การออกแบบ  ตั้งค่า BackgroundColor

 นา Component ที่ชื่อ Row มาวาง 1. ปรบั ขนาด Height เป็นแบบ Absolute Size ขนาด 80 px  นา Component Label มาใสใ่ น Row เปลย่ี นชื่อ Label เปน็ LabelName 1. เปลีย่ นขอ้ ความใน Text เป็น ฉนั อยู่ทไี่ หน ? 2. เปลย่ี นสขี อ้ ความเป็น สสี ม้ 3. เปลยี่ นสีพืน้ หลงั ข้อความเป็น สีขาว 4. ปรบั ขนาด Font เป็นแบบ Absolute Size 40 px 5. ปรับขนาด Height เป็นแบบ Absolute Size 50 px 6. ปรับขนาด Width เป็นแบบ Absolute Size ขนาด 300 px 7. ปรับขนาด TextAlign เป็น center  นา Component ท่ีชอ่ื Row มาวาง 1. ปรบั ขนาด Height เป็นแบบ Absolute Size ขนาด 100 px

 นา Component Maps มาวาง เปลย่ี นชือ่ เป็น MapScreen2  นา Component ท่ชี อื่ Row มาวาง 1. ปรับขนาด Height เป็นแบบ Absolute Size ขนาด 80 px  นา Button มาวาง เปลย่ี นช่ือปุม่ เป็น BtnBack 1. เปลยี่ นขอ้ ความใน Text ของ Button เปน็ Back ปรับขนาดข้อความเป็น 16 px 2. ปรบั ขนาด Height เปน็ แบบ Absolute Size ขนาด 50 px 3. เปลี่ยนสีข้อความเปน็ สแี ดง  นา Label มาวาง 1. ลบขอ้ ความใน Text 2. ปรบั ขนาด Height เป็นแบบ Absolute Size ขนาด 25 px 3. ปรบั ขนาด Width เปน็ แบบ Absolute Size ขนาด 50 px

 นา Button มาวาง เปลยี่ นชื่อปมุ่ เปน็ BtnPlace 1. เปล่ยี นข้อความใน Text ของ Button เปน็ สถานทที่ ่องเท่ยี วนา่ สนใจ 2. ปรบั ขนาดขอ้ ความเปน็ 20 px 3. ปรับขนาด Height เปน็ แบบ Absolute Size ขนาด 50 px 4. ปรับขนาด Width เปน็ แบบ Absolute Size ขนาด 275 px 5. เปลี่ยนสีขอ้ ความเป็น สีสม้ 2.2.2 การโปรแกรม  นา Location Sensor มาวาง 1. เลอื ก Block ของ Screen1 2. เลอื กชือ่ BtnBack1 นา Block when Btn Click มาวาง 3. เลอื กชือ่ Control นาคาสง่ั nevigate to Screen1 มาวางใน Block BtnBack1 4. เลือกชอ่ื BtnPlace นา Block when Btn Click มาวาง 5. เลือกชื่อ Control นาคาสั่ง nevigate to Screen3 มาวางใน Block BtnPlace

6. เลอื กคาสั่ง in Location_Sensor1 call GetCurrentLocation นามาวาง  นาคาสั่ง set Latitude to Latitude  นาคาส่งั set Longtitude to Longtitude  นาคาสง่ั set Zoom to 4 (ระยะการซมู เรมิ่ ตน้ )  นาคาสั่ง addMarker มาวาง (เพ่ือใส่ Marker ตาแหนง่ )

2.3 Screen3 2.3.1 การออกแบบ  ตัง้ คา่ BackgroundColor

 นา Component ทีช่ ื่อ Row มาวาง 1. ปรบั ขนาด Height เปน็ แบบ Absolute Size ขนาด 100 px  นา Component Button มาใสใ่ น Row เปลยี่ นช่อื Button เป็น BtnKMUTNB 1. เปลี่ยนข้อความใน Text เป็น KMUTNB 2. เปลี่ยนสขี อ้ ความเป็น สขี าว 3. เปลีย่ นสพี น้ื หลังขอ้ ความเปน็ สสี ม้ 4. ปรบั ขนาด Font เปน็ แบบ Absolute Size 16 px 5. ปรับขนาด Height เปน็ แบบ Absolute Size 50 px 6. ปรับขนาด Width เปน็ แบบ Absolute Size ขนาด 100 px  นา Label มาวาง 1. ลบข้อความใน Text 2. ปรบั ขนาด Height เปน็ แบบ Absolute Size ขนาด 25 px 3. ปรับขนาด Width เปน็ แบบ Absolute Size ขนาด 50 px

 นา Component Button มาใสใ่ น Row เปลีย่ นชอ่ื Button เป็น BtnBigC 1. เปล่ยี นขอ้ ความใน Text เป็น Big C 2. เปลย่ี นสีข้อความเปน็ สขี าว 3. เปลย่ี นสีพน้ื หลงั ข้อความเปน็ สเี ขยี ว 4. ปรบั ขนาด Font เปน็ แบบ Absolute Size 16 px 5. ปรับขนาด Height เป็นแบบ Absolute Size 50 px 6. ปรบั ขนาด Width เป็นแบบ Absolute Size ขนาด 100 px  นา Component Maps มาวาง เปลี่ยนชือ่ เป็น MapScreen2  นา Component ที่ชือ่ Row มาวาง 1. ปรบั ขนาด Height เป็นแบบ Absolute Size ขนาด 60 px  นา Button มาวาง เปล่ียนชื่อปมุ่ เป็น BtnBack 1. เปล่ียนข้อความใน Text ของ Button เป็น Back ปรับขนาดขอ้ ความเป็น 16 px 2. ปรบั ขนาด Height เป็นแบบ Absolute Size ขนาด 50 px 3. ปรบั ขนาด Width เป็นแบบ Absolute Size ขนาด 200 px 4. เปล่ยี นสขี อ้ ความเป็น สีแดง

2.3.2 การโปรแกรม 1. เลือก Block ของ Screen1 2. เลอื กช่ือ BtnBack2 นา Block when Btn Click มาวาง 3. เลอื กชือ่ Control นาคาสั่ง nevigate to Screen1 มาวางใน Block BtnBack2 4. เลือกคาสั่ง in Location_Sensor1 call GetCurrentLocation นามาวาง 5. นาคาสง่ั set Latitude to 13.818993 (พกิ ดั ของมหาลัย) 6. นาคาสง่ั set Longtitude to 100.514087 (พกิ ดั ของมหาลัย) 7. นาคาสั่ง set Zoom to 4 (ระยะการซมู เร่ิมต้น) 8. นาคาสง่ั addMarker มาวาง (เพอ่ื ใส่ Marker ตาแหนง่ )

9. เลอื กคาสัง่ in Location_Sensor1 call GetCurrentLocation นามาวาง 10. นาคาสง่ั set Latitude to 13.827104 (พกิ ดั ของห้าง Big C) 11. นาคาส่งั set Longtitude to 100.528178 (พกิ ดั ของห้าง Big C) 12. นาคาส่งั set Zoom to 4 (ระยะการซูมเรมิ่ ตน้ ) 13. นาคาส่ัง addMarker มาวาง (เพอ่ื ใส่ Marker ตาแหนง่ )