หน่วยที่ 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.2. ตรวจดูให้แน่ใจว่าช่องค้นหาไม่มีข้อมลูอยู่ แล้วคลิกภายในช่องนั้น 1.3. คลิกที ่ My maps

1.1.ลงชื่อเข้าใช้ Google Maps

1.2. ตรวจดูให้แน่ใจว่าช่องค้นหาไม่มีข้อมูลอยู่ แล้วคลิกภายในช่อง

1.3. คลิกที ่ My maps

1.4. คลิกปุ่ม Create

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

1.4. คลิกปุ่ม Create

1.5. คลิกที่ Untitled layer

1.6. ใส่ชื่อสถานที่ คลิก Save

2. การค้นหาสถานที่

2.1. ใส่ชื่อสถานที่ที่ต้องการค้นหา 2.2. คลิกที่ปุม่ค้นหา

2.3. ผลจากการค้นหาจะแสดงหมุดเป็นสี

2.1. ใส่ชื่อสถานที่ที่ต้องการค้นหา

2.2. คลิกที่ปุ่มค้นหา

2.3. ผลจากการค้นหาจะแสดงหมุดเป็นสี

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

3.2. ปรากฏหน้าต่าง Untitled Layer

3.1. คลิกปุ่ม Add Directions

3.2. ปรากฏหน้าต่าง Untitled Layer

3.3. คลิกที่ Untitled Layer ใส่ชื่อคลิก Save

3.4. ใส่ชื่อสถานที่ต้นทาง A ใส่ชื่อสถานทีต่้นทาง B

3.3. คลิกที่ Untitled Layer ใส่ชื่อคลิก Save

3.4. ใส่ชื่อสถานที่ต้นทาง A ใส่ชื่อสถานที่ต้นทาง B

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

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

4. การแชรล์ิงก ์4.1. คลิกปุ่มแชร์

4.2. ใส่ชื่อ Map Title แล้วคลิก Save

4.1. คลิกปุ่มแชร์

4.2. ใส่ชื่อ Map Title แล้วคลิก Save

4.3. ปรากฏหน้าต่าง Sharing settings คลิกที่ Change เพื่อก าหนดสิทธิ์ในการเขา้ถึง Maps

4.4. ก าหนดรูปแบบการแชร์ให้เป็นแบบ Public On Web

4.3. คลิก Change เพื่อก าหนดสิทธิ์ในการเข้าถึง Maps

4.4. ก าหนดรูปแบบการแชร์ให้เป็นแบบ Public On Web

4.5. ก าหนดสิทธิ์ในการเข้าถึง Maps แล้วคลิก Save

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

4.8. แล้วคลิก Done

4.5. ก าหนดสิทธิ์ในการเข้าถึง Maps แล้วคลิก Save

4.6. คัดลอกลิงก์

4.7. ใส่ E-mail เพื่อแชร์ให้เพื่อน แล้วคลิก Done

4.8. แล้วคลิก Done

5. การก าหนดจุดที่ต้องการ (Mark) 5.1. ค้นหาสถานที ่

5.2. เมื่อค้นหาเรียบร้อยแล้วจะมีหมุดปักในแผนที ่

5.1. ค้นหาสถานที่

5.2. เมื่อค้นหาเรียบร้อยแล้วจะมีหมุดปักในแผนที่

5.3. คลิกที่หมุด จะแสดงหน้าต่างข้อมูล คลิกที่ เพิ่มลงในแผนที ่

5.4. จะแสดงสถานที่ในหน้าต่างด้านซ้าย

5.3. คลิกที่หมุด จะแสดงหน้าต่างข้อมูล คลิกที่ Add to map

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

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

5.6. ใส่ข้อมูลเพิ่ม หรือ remove ข้อมูลออก

5.5. คลิกปุ่ม Edit เพื่อแก้ไข

5.6. ใส่ข้อมูลเพิ่มหรือ remove ข้อมูลออก

5.7. คลิก Add image or video เพื่อใส่รูปภาพจาก url

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

5.7. คลิก Add image or video

5.8. คลิก Select

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

5.10. การ Share Map คลิกเลือก Share

5.9. คลิก Save

5.10.คลิก Share

5.11. จะปรากฏหน้าต่างดังรูป แล้วใส ่ Map title แล้วคลิก Save

5.12. ปรากฏหน้าต่าง Sharing settings คลิกที่ Change เพื่อก าหนดสิทธิ์ในการเขา้ถึง Maps

5.11. ใส่ชื่อ Map title แล้วคลิก Save

5.12. คลิก Change เพื่อก าหนดสิทธิ์ในการเข้าถึง Maps

5.13. ก าหนดรูปแบบการแชร์ให้เป็นแบบ Public On Web

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

5.13. ก าหนดรูปแบบการแชร์ให้เป็นแบบ Public On Web Web

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.3. คัดลอกลิงก์แล้วน าไปฝังในเว็บไซต์

6.1. คลิกที่ จุด 3 จุด

6.2. เลือก Embed on my site

6.3. คัดลอกลิงก์แล้วน าไปฝังในเว็บไซต์