วิธีเพิ่มแผนที่ Google Maps ในเว็บไซต์ Joomla

วิธีง่ายที่สุดในการเพิ่ม Google Maps ใน Joomla คือคัดลอกโค้ดฝังแผนที่จาก Google Maps แล้ววางในบทความหรือโมดูล Custom ของ Joomla จากนั้นบันทึกและตรวจสอบการแสดงผลบนหน้าเว็บไซต์ หากโค้ดถูกลบหลังบันทึก มักเกิดจากตัวกรองของ Joomla หรือการตั้งค่าตัวแก้ไขข้อความ

❶ คัดลอกโค้ดแผนที่จาก Google Maps

① ค้นหาสถานที่ที่ต้องการแสดง

เปิด Google Maps แล้วค้นหาชื่อร้าน สำนักงาน หรือสถานที่ที่ต้องการ หากผลการค้นหาไม่ตรง ให้ตรวจสอบที่อยู่และเลือกตำแหน่งบนแผนที่ให้ถูกต้องก่อนคัดลอกโค้ด

② เลือกตัวเลือกฝังแผนที่

เปิดเมนูแชร์ของสถานที่ แล้วเลือกตัวเลือกสำหรับฝังแผนที่ จากนั้นคัดลอกโค้ด HTML ที่ Google Maps สร้างให้ หากต้องการแสดงแผนที่ที่มีหลายตำแหน่งหรือข้อมูลที่บันทึกไว้ ให้ตรวจสอบว่าสามารถฝังแผนที่ชนิดนั้นได้หรือไม่

❷ เพิ่มแผนที่ในบทความ Joomla

① เปิดบทความที่ต้องการแก้ไข

เข้าสู่หลังบ้าน Joomla ไปที่ส่วนจัดการบทความ แล้วเปิดบทความที่ต้องการแสดงแผนที่ วางเคอร์เซอร์ไว้ตรงตำแหน่งที่ต้องการให้แผนที่ปรากฏ

② วางโค้ดในโหมด HTML

สลับตัวแก้ไขเป็นโหมด HTML หรือใช้ตัวเลือกสำหรับแก้ไขโค้ด แล้ววางโค้ดที่คัดลอกจาก Google Maps บันทึกบทความและเปิดหน้าเว็บไซต์เพื่อตรวจสอบว่าแผนที่แสดงถูกตำแหน่ง

หากตัวแก้ไขไม่มีโหมด HTML หรือเอาโค้ดออกเมื่อบันทึก ให้ใช้โมดูล Custom ที่ตั้งค่าให้รับโค้ดดังกล่าว หรือเลือกส่วนเสริมแผนที่ที่รองรับเวอร์ชัน Joomla ของเว็บไซต์

❸ เพิ่มแผนที่ด้วยโมดูล Custom

① สร้างโมดูลใหม่

ในหลังบ้าน Joomla เปิดส่วนจัดการโมดูลของเว็บไซต์ แล้วสร้างโมดูลชนิด Custom ตั้งชื่อให้สื่อความหมาย เช่น “แผนที่สำนักงาน” จากนั้นวางโค้ดฝังแผนที่ในช่องเนื้อหา โดยใช้โหมด HTML ของตัวแก้ไข

② กำหนดตำแหน่งและหน้าที่จะแสดง

เลือกตำแหน่งโมดูลที่เทมเพลตรองรับ กำหนดสถานะเป็นเผยแพร่ และเลือกเมนูหรือหน้าที่ต้องการให้แสดงแผนที่ หากต้องการแสดงเฉพาะหน้าติดต่อ ให้กำหนดการแสดงผลเฉพาะเมนูนั้น

❹ แก้ปัญหาเมื่อแผนที่ไม่แสดง

① ตรวจสอบว่าตัวกรองลบโค้ดหรือไม่

หากบันทึกแล้วแผนที่หายไป ให้ตรวจสอบการตั้งค่าตัวแก้ไขและตัวกรองข้อความของ Joomla เพราะระบบอาจตัดแท็กหรือแอตทริบิวต์บางชนิดออก การปรับตัวกรองควรจำกัดเฉพาะกลุ่มผู้ดูแลที่เชื่อถือได้ ไม่ควรปิดการกรองให้ผู้ใช้ทั่วไปหรือผู้เขียนที่ไม่จำเป็นต้องใส่โค้ด

② ตรวจสอบการเผยแพร่และการกำหนดเมนู

ตรวจสอบว่าโมดูลหรือบทความเผยแพร่แล้ว เลือกตำแหน่งโมดูลถูกต้อง และกำหนดเมนูที่จะแสดงไว้ หากตำแหน่งนั้นไม่มีอยู่ในเทมเพลต แผนที่ก็อาจไม่ปรากฏตามที่คาดไว้

③ ตรวจสอบหน้าจอมือถือและการโหลด

เปิดหน้าเว็บบนโทรศัพท์และคอมพิวเตอร์ ตรวจว่าแผนที่ไม่ล้นกรอบ มองเห็นตำแหน่งได้ชัด และหน้าเว็บยังโหลดได้ตามปกติ หากใช้แคช ให้ล้างแคชหลังแก้ไขแล้วทดสอบอีกครั้ง

ทีม ComSiam แนะนำให้ใส่ชื่อที่อยู่และข้อมูลติดต่อไว้เป็นข้อความบนหน้าเว็บร่วมกับแผนที่ เพื่อให้ผู้เข้าชมยังดูข้อมูลสำคัญได้เมื่อแผนที่โหลดไม่สำเร็จ

❺ ข้อควรระวังก่อนเผยแพร่

แผนที่ที่ฝังจาก Google จะโหลดเนื้อหาจากบริการภายนอก จึงควรตรวจนโยบายความเป็นส่วนตัวของเว็บไซต์และข้อกำหนดที่เกี่ยวข้องก่อนใช้งานจริง สำหรับแผนที่ทั่วไปให้ใช้โค้ดฝังที่ Google Maps สร้างให้โดยตรง ส่วนการใช้งาน API หรือฟังก์ชันขั้นสูงอาจต้องตั้งค่าเพิ่มเติมตามเงื่อนไขของ Google

ก่อนเผยแพร่ ตรวจซ้ำว่าแผนที่แสดงสถานที่ถูกต้อง เปิดดูได้ทั้งบนมือถือและคอมพิวเตอร์ และไม่แสดงบนหน้าที่ไม่เกี่ยวข้อง ComSiam แนะนำให้ทดสอบในเว็บไซต์สำรองก่อน หากต้องปรับตัวกรองหรือเปลี่ยนการตั้งค่าตัวแก้ไข