google map

หนว่ ยที่ 5.3 การสรา้ งประยกุ ต์ใช้แอปพลิเคช่นั Maps Google Maps กรอบแนวคดิ Google Maps เป็นบรกิ ารคน้ หาทีต่ ง้ั บนแผนที่ การคน้ หาเสน้ ทาง และให้ขอ้ มลู เบอื้ งต้นของสถานที่น้นั ๆ เช่น ที่ตงั้ รายละเอยี ดการตดิ ต่อ เส้นทางการเดนิ ทาง ซึง่ บริการ Google Maps ใหบ้ รกิ ารมาตัง้ แต่กลางปี ค.ศ. 2005 เป็นบรกิ ารฟรที ่ี Google บรกิ ารใหแ้ ก่บคุ คลทวั่ ไป จุดเดน่ ของ Google Maps คือ การบริการแผนทแี่ ละ ภาพถา่ ยดาวเทยี ม ที่คลอบคลมุ ท่ัวโลก ดว้ ยจดุ เดน่ เร่ืองแผนที่ และการกาหนดเป้าหมายท่ีชัดเจนสามารถใสข่ ้อมูล ที่เป็นภาพ ขอ้ ความ รายละเอียดเบ้ืองต้นได้ จงึ สามารถประยุกตใ์ ชก้ บั การจดั การเรยี นรู้ในโรงเรยี นได้ ทง้ั การ กาหนดเป้าหมายในการเข้าถงึ แหล่งความรูต้ า่ งๆ รอบโรงเรียน การกาหนดจดุ เย่ยี มชม ระยะทางในการเดินทาง เวลา และรูปแบบในการเดนิ ทางไปยังเป้าหมาย ทาใหเ้ กดิ ความสะดวกตอ่ การทางาน ชว่ ยให้การดาเนินงานมี ประสทิ ธิภาพยิ่งข้ึน วตั ถปุ ระสงค์ 1. เพ่ือให้ผูเ้ ข้ารบั การอบรม รู้ และเขา้ ใจลักษณะการทางานของ Google Maps 2. เพ่ือใหผ้ ู้เขา้ รับการอบรมสามารถใชง้ าน Google Maps ได้ เนอ้ื หา 1. การใช้งาน Google Maps 1.1 การสร้างแผนท่ีใหม่ 1.2 การค้นหาสถานท่ี 1.3 การคน้ หาเส้นทาง 1.4 การแชรล์ งิ ก์ 1.5 การกาหนดจุดทีต่ อ้ งการ (Mark) 1.6 การนา Code ไปฝงั บนเวบ็ ไซต์ ส่อื อุปกรณ์ 1. อินเทอร์เนต็ ความเรว็ สงู 2. เครื่องคอมพวิ เตอร์แบบต้ังโตะ๊ (PC) หรอื Notebook 3. เวบ็ ไซต์ Google Mas เพ่ือเข้าใชง้ านท่ี https://www.google.co.th/maps 4. โปรแกรม Chrome Browser 5. LCD Projector 6. ใบงาน 7. ใบความรู้ เวลา 1.00 ช่ัวโมง

ใบความรู้ที่ 1 การใช้งาน Google Maps ความสามารถของ Google Maps 1. ไมจ่ าเป็นต้อง Install Application ใดๆ เหมอื นอยา่ ง Google Earth เพราะสามารถเรยี กดแู ละใช้ บรกิ าร Google Map ได้จาก Browser ทวั่ ไป 2. สามารถใช้บริการ Google Maps ไดจ้ ากทาง PDA iPhone หรอื ทาง โทรศพั ท์มือถือทุกรุ่นทส่ี นบั สนุน WAP และ GPRS 3. เป็นบริการฟรี ทสี่ ามารถใชบ้ รกิ ารได้โดยไมต่ ้องเสยี คา่ ใชจ้ ่ายใดๆ 4. สามารถเอาไอคอนมาวางตามจดุ ท่ตี อ้ งการ Mark ไว้ได้เช่นเดยี วกับ Google Earth โดยจะมีสัญลกั ษณ์ แทนสถานที่ตา่ งๆ เช่น โรงพยาบาล ปัม๊ นา้ มัน โรงเรียน วดั ตกึ ฯลฯ 5. สามารถค้นหาเสน้ ทางในการเดนิ ทางโดยระบุจดุ เรม่ิ ต้นและ จดุ หมายปลายทาง 6. สามารถดูภาพของสถานที่น้นั ๆกอ่ นได้รวมถึงภาพของบรเิ วณ ใกลเ้ คยี ง (Street View) และยังสามารถ ทจี่ ะเลือกการดภู าพเปน็ แบบ 360 องศาในลกั ษณะภาพน่ิง 7. สามารถนาแผนท่จี าก Google Map ไปใชใ้ นเวบ็ ไซท์ของเราเองได้ หากต้องการให้แสดงแผนทตี่ ้งั ของ สถานที่ท่ีเราตอ้ งการ เช่น บริษทั บ้าน รา้ นค้า ฯลฯ ซ่ึงเป็นบรกิ ารฟรสี าหรบั เวบ็ ไซท์ที่มเี นอื้ หาเปน็ สาธารณะ หรอื ไม่มีผลกาไรทางธุรกิจแอบแฝง หรือหากตอ้ งการนา ไปใช้ในทางธุรกิจนนั้ จะตอ้ งซ้อื Enterprise Licensees จากทาง Google กอ่ นการนาไปใช้ คลิกเพ่อื ใชง้ านบริการแผนทีส่ ว่ นตัว พิมพข์ ้อความทน่ี เ่ี พื่อหาขอ้ มูลต่างๆ เลือกทนี่ ่ีเมอ่ื ตอ้ งการคน้ หา สถานท่ีทางธรุ กิจ เลอื กที่น่เี พอ่ื คน้ หาเส้นทางการเดินทางต่างๆ คลิกเพื่อกาหนดมุมมองของแผนท่ี คลกิ เพอ่ื พิมพ์ หรอื สง่ แผนท่ี คลิกเพ่ือสรา้ ง URL สาหรบั เชอื่ มต่อมาทีแ่ ผนทข่ี องคุณ แสดงผลของการค้นหาแผนท่ตี า่ งๆ ใช้ เคร่ืองมอื นใ้ี นการยอ่ หรือขยายแผนท่ี หนา้ หลัก Google Maps

1. สรา้ งแผนทใ่ี หม่ 1.1. ลงช่ือเขา้ ใช้ Google Maps โดยใช้ปมุ่ ลงชอ่ื เขา้ ใชท้ ่มี ุมบนขวาของแผนท่ี 1.1.ลงชื่อเข้าใช้ Google Maps 1.2. ตรวจดูใหแ้ น่ใจวา่ ช่องคน้ หาไม่มีขอ้ มลู อยู่ แลว้ คลกิ ภายในชอ่ งนัน้ 1.3. คลิกท่ี My maps 1.2. ตรวจดใู ห้แน่ใจวา่ ชอ่ งคน้ หาไม่มี ข้อมลู อยู่ แลว้ คลกิ ภายในช่อง 1.3. คลกิ ที่ My maps

1.4. คลิกปมุ่ Create 1.4. คลกิ ปุ่ม Create 1.5. คลิกท่ี Untitled layer 1.6. ใส่ช่อื สถานท่ี คลิก Save 1.6. ใสช่ ื่อสถานท่ี คลิก Save 1.5. คลิกท่ี Untitled layer

2. การค้นหาสถานท่ี 2.2. คลิกที่ป่มุ คน้ หา 2.1. ใส่ชือ่ สถานท่ที ี่ต้องการค้นหา 2.2. คลิกทีป่ มุ่ ค้นหา 2.1. ใส่ชอ่ื สถานท่ที ่ตี อ้ งการคน้ หา 2.3. ผลจากการคน้ หาจะแสดงหมดุ เปน็ สี 2.3. ผลจากการคน้ หาจะแสดงหมดุ เป็นสี

3. การค้นหาเสน้ ทาง 3.1. คลกิ ป่มุ Add Directions 3.1. คลกิ ป่มุ Add Directions 3.2. ปรากฏหนา้ ต่าง Untitled Layer 3.2. ปรากฏหนา้ ต่าง Untitled Layer

3.3. คลิกท่ี Untitled Layer ใส่ชื่อคลิก Save 3.3. คลิกที่ Untitled Layer ใส่ชือ่ คลิก Save 3.4. ใสช่ อื่ สถานทต่ี น้ ทาง A ใส่ชอ่ื สถานทตี่ ้นทาง B 3.4. ใสช่ อ่ื สถานทต่ี น้ ทาง A ใสช่ ่ือสถานทต่ี ้นทาง B

3.5. ผลการค้นหาเส้นทาง 3.5. ผลการค้นหาเส้นทาง

4. การแชรล์ งิ ก์ 4.1. คลิกปุ่มแชร์ 4.1. คลิกปุ่มแชร์ 4.2. ใสช่ ือ่ Map Title แลว้ คลิก Save 4.2. ใส่ชือ่ Map Title แลว้ คลกิ Save

4.3. ปรากฏหน้าตา่ ง Sharing settings คลกิ ท่ี Change เพ่ือกาหนดสทิ ธ์ิในการเขา้ ถึง Maps 4.3. คลิก Change เพอื่ กาหนดสิทธ์ใิ นการเข้าถงึ Maps 4.4. กาหนดรูปแบบการแชร์ใหเ้ ป็นแบบ Public On Web 4.4. กาหนดรปู แบบการแชร์ใหเ้ ปน็ แบบ Public On Web

4.5. กาหนดสิทธิ์ในการเขา้ ถึง Maps แล้วคลกิ Save 4.5. กาหนดสิทธ์ิในการเข้าถึง Maps แล้วคลิก Save 4.6. คดั ลอกลิงก์เพอ่ื นาไปแปะบนเวบ็ ไซต์ 4.7. ใส่ E-mail เพ่ือแชรใ์ ห้เพ่อื น 4.8. แล้วคลกิ Done 4.6. คดั ลอกลิงก์ 4.7. ใส่ E-mail เพื่อแชรใ์ ห้เพ่อื น แล้วคลกิ Done 4.8. แล้วคลิก Done

5. การกาหนดจุดทต่ี ้องการ (Mark) 5.1. คน้ หาสถานท่ี 5.1. ค้นหาสถานที่ 5.2. เมือ่ คน้ หาเรียบร้อยแล้วจะมีหมดุ ปกั ในแผนที่ 5.2. เมื่อคน้ หาเรียบรอ้ ยแลว้ จะมี หมดุ ปกั ในแผนท่ี

5.3. คลกิ ที่หมุด จะแสดงหน้าตา่ งข้อมลู คลิกที่ เพม่ิ ลงในแผนที่ 5.3. คลิกที่หมุด จะแสดงหนา้ ต่าง ขอ้ มูล คลกิ ที่ Add to map 5.4. จะแสดงสถานท่ีในหนา้ ตา่ งดา้ นซ้าย 5.4. จะแสดงสถานท่ีในหน้าตา่ งดา้ นซา้ ยแลว้ คลกิ ชอื่ ทีเ่ พ่มิ ลงในแผนที่

5.5. คลิกช่ือทเี่ พ่ิมลงไปในแผนทจ่ี ะแสดงหนา้ ต่าง แลว้ เลอื ก ปุ่ม Edit เพอ่ื แก้ไข 5.6. ใส่ขอ้ มูลเพิ่ม หรือ remove ข้อมลู ออก 5.5. คลิกปมุ่ Edit เพอื่ แกไ้ ข 5.6. ใส่ข้อมลู เพิ่มหรอื remove ขอ้ มลู ออก

5.7. คลกิ Add image or video เพื่อใสร่ ปู ภาพจาก url 5.7. คลิก Add image or video 5.8. แสดงหนา้ ตา่ ง Choose an image or video สามารถค้นหารปู จาก google แทรกรปู ภาพจาก URL คน้ หา video หรือจาก Youtube จาก URL เลอื กเรยี บรอ้ ยแลว้ คลกิ Select 5.8. คลกิ Select

5.9. แสดงหนา้ ตา่ งดังรปู เลือก Save เพือ่ บนั ทึกขอ้ มลู 5.9. คลิก Save 5.10. การ Share Map คลิกเลอื ก Share 5.10.คลิก Share

5.11. จะปรากฏหน้าตา่ งดงั รูป แลว้ ใส่ Map title แลว้ คลกิ Save 5.11. ใสช่ ื่อ Map title แล้วคลกิ Save 5.12. ปรากฏหนา้ ต่าง Sharing settings คลิกท่ี Change เพือ่ กาหนดสิทธิใ์ นการเขา้ ถึง Maps 5.12. คลกิ Change เพือ่ กาหนดสิทธใ์ิ นการเข้าถึง Maps

5.13. กาหนดรูปแบบการแชร์ให้เป็นแบบ Public On Web 5.13. กาหนดรูปแบบการแชร์ให้เปน็ แบบ Public On Web Web 5.14. กาหนดสทิ ธ์ใิ นการเขา้ ถงึ Maps Can view : สามารถดูได้อย่างเดยี ว Can Edit : สามารถแก้ไขได้ แลว้ คลกิ Save 5.14. กาหนดสทิ ธใิ์ นการเขา้ ถงึ Maps แลว้ คลกิ Save

5.15. คัดลอกลงิ กเ์ พ่อื นาไปแปะบนเว็บไซต์ 5.16. ใส่ E-mail เพ่อื แชรใ์ หเ้ พ่ือน 5.17. แลว้ คลกิ Done 5.15. คดั ลอกลงิ ก์ 5.16. ใส่ E-mail เพอื่ แชร์ให้เพ่ือน 5.17. แลว้ คลิก Done

6. การนา Code ไปฝังบนเวบ็ ไซต์ 6.1. คลกิ ที่ จดุ 3 จุด 6.2. เลือก Embed on my site 6.1. คลกิ ที่ จดุ 3 จดุ 6.2. เลอื ก Embed on my site 6.3. คดั ลอกลงิ ก์แลว้ นาไปฝังในเวบ็ ไซต์ 6.3. คดั ลอกลิงก์แลว้ นาไปฝงั ในเวบ็ ไซต์