สร้างแผนที่บนเว็บไซต์ Google Map

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

1. คลิกสร้างแผนที่ โดยไปที่หน้า mapsengine.google.com จากนั้น ล็อกอินเข้าสู่ระบบด้วย Google Account ของคุณ (หรือสมัครใหม่ฟรี ไม่มีค่าใช้จ่าย) เมื่อล็อกอินเรียบร้อยแล้ว คลิกปุ่ม "Create a new map" (สร้างแผนที่)

2. กรอกรายละเอียดและระบุตำแหน่งที่ตั้ง เบื้องต้นสามารถตั้งชื่อแผนที่ เพิ่มรายละเอียดที่อยู่ และข้อมูลติดต่อ ลงในช่องต่างๆ โดยคลิกที่ตำแหน่งนั้นๆ และตั้งชื่อแทนคำว่า "Untitled" (ไม่มีชื่อ) ได้เลย

สำหรับการ ระบุตำแหน่งที่ตั้้งบนแผนที่ ให้คลิกปุ่ม

(เพิ่มเครื่องหมายตำแหน่ง) จากนั้น คลิกวางหมุดในพิกัดบนแผนที่ตามต้องการ และสามารถพิมพ์ข้อมูลเกี่ยวกับองค์กรของคุณสำหรับแสดงผลเพิ่มเติมบนแผนที่ และคลิก บันทึก

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

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

3.1. คลิกที่ปุ่ม "Share"

3.2. แสดงหน้าต่างสำหรับกรอกชื่อและรายละเอียดแผนที่และกด "Save" (หากไม่ต้องการกรอก สามารถกด skip เพื่อข้ามได้)

3.3. ในหน้าต่าง "Sharring Setting" ที่หัวข้อ "Who has Access" คลิกปุ่ม "Change" เพื่อกำหนดสิทธิ์การเข้าถึง

3.4. - 3.5. ปรากฎหน้าต่าง "Link Sharing" ให้คลิกตัวเลือก "Public on the Web" แชร์เป็นสาธารณะ และคลิก "Save"

3.6. กลับสู่หน้าต่าง "Sharring Setting" คลิกปุ่ม "Done"

3.7. กลับสู่หน้าจัดการแผนที่หลัก ให้คลิกสัญลักษณ์

3.8. คลิก "Embed on my site"

3.9. คัดลอก Code Iframe ในหน้าต่างที่ปรากฎ และกด OK

4. นำโค้ดแผนที่ติดตั้งในเว็บไซต์ เมื่อ Log in เข้าส่วนแก้ไขเว็บไซต์ของคุณแล้ว จากนั้น คลิก "แก้ไข" เมนูที่ต้องการแสดงผลแผนที่
โดยส่วนใหญ่ก็คือ เมนู "ติดต่อเรา" นั่นเอง หรือหากต้องการอธิบายข้อมูลการเดินทางอย่างละเอียด ก็อาจสร้างเป็นเมนู "แผนที่การเดินทาง" ขึ้นมาใหม่เลย ก็ไม่ผิดกติกา

โดยก่อนวางโค้ดนั้น จะต้องคลิกเครื่องมือที่จะเปลี่ยนพื้นที่เนื้อหาให้รองรับ Code ต่างๆ ก่อน เช่น

(Source) หรือ

(Edit HTML Source) และ เมนู < > (Source Code) ไม่อย่างนั้นแล้วระบบเว็บไซต์จะมองว่า Code แผนที่ของเรา เป็นเพียงข้อมูลตัวอักษรปกติค่ะ หากเครื่องมือ Source ทำงาน ข้อมูลในช่องรายละเอียดจะถูกแปลงเป็น HTML Code และพร้อมรับข้อมูลที่เป็น Code ต่าง ๆ ให้วางโค้ด Google Maps ในช่องรายละเอียดเนื้อหาได้เลย หากเครื่องมือ Source ทำงาน ข้อมูลในช่องรายละเอียดจะถูกแปลงเป็น HTML Code และพร้อมรับข้อมูลที่เป็น Code ต่าง ๆ ให้วางโค้ด Google Maps ในช่องรายละเอียดเนื้อหาได้เลย