หน้า Contact Us เป็นส่วนสำคัญที่ทุกเว็บไซต์ควรที่จะต้องมี เพื่อให้ผู้เข้าชมสามารถติดต่อสอบถามเกี่ยวกับบริการหรือสินค้าของเราได้ ซึ่งในหน้า Contact Us นี่เอง ก็จะมีการลงแผนที่ที่เป็นที่ตั้งของบริษัทหรือร้านค้าของเรา การทำแบบนี้จะช่วยเพิ่มความน่าเชื่อถือให้กับบริษัทหรือร้านค้า เพื่อให้ผู้เข้าชมจะทราบว่าเรามีตัวตนอยู่จริงๆ และเชื่อมั่นที่จะใช้บริการหรือสั่งสินค้าจากเว็บไซต์
ส่วนแผนที่ที่นำมาแสดงในเว็บไซต์นั้น ส่วนใหญ่ก็คงจะใช้แผนที่จาก Google Map เพราะเป็นที่แพร่หลายและสามารถใส่รายละเอียดต่างๆได้มากมาย โดยในบทความนี้จะขอแนะนำ WP Map Block ซึ่งเป็นปลั๊กอินที่ใช้แสดงแผนที่ Google Maps โดยใช้ WordPress Block Editor หรือ Gutengerg ที่นอกจากจะแสดงแผนที่จาก Google Maps ได้ยังแสดงแผนที่จาก OpenStreet Maps ซึ่งเป็นผู้ให้บริการฐานข้อมูลแผนที่ก่อตั้งในปี 2004 โดย Steve Coast
WP Map Block เป็นปลั๊กอินจากผู้พัฒนา Academy LMS ที่มีสำนักงานอยู่ในเมืองคูลนา บังกลาเทศ ซึ่งเป็นแบรนด์ลูกของ Kodezen Limited ที่ก่อตั้งในปี 2020 โดย Tushar Imran นอกจากปลั๊กอิน WP Map Block แล้ว ก็ยังมีปลั๊กอิน Academy LMS ซึ่งเป็นปลั๊กอินที่ใช้ในการสร้างเว็บ e-Learning
WP Map Block มีอินเตอร์เฟซที่เรียบง่าย ไม่มีการตั้งค่าที่ยุ่งยากและซ้บซ้อน สร้างจาก LeafletJS ซึ่งเป็นไลบรารี JavaScript แบบโอเพ่นซอร์สสำหรับ Interactive Maps ที่เหมาะกับการแสดงผลบน Mobile โดยมียอดดาวน์โหลดไปใช้งานตั้งแต่เวอร์ชั่นแรกจนถึีงเวอร์ล่าสุดรวมแล้วมากกว่า 160,000 ครั้ง
คุณสมบัติเด่น
Google Maps
แสดงแผนที่ Google Map ได้
OpenStreet Maps
แสดงแผนที่ของ OpenStreet Map ซึ่งเป็นแผนที่แบบโอเพ่นซอร์ส บนเว็บไซต์ได้
Multiple Marker
ตามค่าเริ่มต้น เครื่องหมาย Maker จะปรากฏบนแผนที่ตามตำแหน่งที่กำหนดไว้ แต่ก็สามารถเพิ่มเครื่องหมาย Maker ได้เอง นอกจากนี้ยังตั้งชื่อและเนื้อหาสำหรับ Maker รวมถึงกำหนดตำแหน่งเริ่มต้นของ Maker ได้
Zoom Control
ซูมแผนที่เข้าและออกได้อย่างง่ายดาย แผนที่ทำงานได้อย่างรวดเร็วเนื่องจากสร้างโดยใช้ LeafletJS และใช้เวลาไม่นานในการโหลดแผนที่หลังจากซูมเข้าหรือออก
Full Screen Map Control
แสดงแผนที่แบบเต็มหน้าจอ โดยที่ยังควบคุมแผนที่ได้อย่างเต็มที่
Custom Marker Icon & Popup
สามารถวาง Maker ที่กำหนดเองบนแผนที่และวาง Popup ที่ต้องการบนแผนที่ได้
Map Width & Height
สามารถตั้งค่าความกว้างและความสูงของแผนที่ได้ตามที่ต้องการ
Latitude and Longitude Generator from address
สร้างแผนที่จากการระบุตำแหน่งของละติจูดและลองจิจูดได้ การระบุละติจูดและลองจิจูด คุณจะได้รับตำแหน่งและที่อยู่ที่แม่นยำบนแผนที่
Set any marker as center position
คุณสามารถตั้งค่าเครื่องหมายไว้ที่ตำแหน่งตรงกลางบนแผนที่ได้ หากคุณได้วางเครื่องหมายที่กำหนดเองลงบนแผนที่ คุณสามารถกำหนดให้เป็นเครื่องหมายเริ่มต้นและกำหนดตำแหน่งไว้ตรงกลางได้ นี่จะแสดงเครื่องหมายเป็นเครื่องหมายหลัก มันจะแสดงที่กึ่งกลางของแผนที่
Marker Builder
ถ้าเบื่อที่จะเห็นไอคอนเครื่องหมายแบบเดิมบนแผนที่ ปลั๊กอิน WP Map Block ช่วยให้คุณสามารถปรับแต่งแผนที่ได้มากกว่าองค์ประกอบดั้งเดิมของแผนที่ คุณสามารถปรับแต่งรวมทั้งสร้างเครื่องหมายใหม่และวางไว้บนแผนที่ได้
Draggable Marker
คลิกลากเครื่องหมาย Marker ไปที่ตำแหน่่งใด้ก็ได้บนแผนที่ ซึ่งหลังจากลากวางแล้ว ตำแหน่งนั้นก็จะแสดงออกมา
Don’t need any API key
แสดงแผนที่บนเว็บไซต์ได้โดยไม่ต้องใช้ API Key
การติดตั้งปลั๊กอิน WP Map Block
ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin
ที่หน้า Add Plugins ให้ใส่คำว่า WP Map Block ที่ช่อง Keyword
Install และ Activate ให้เรียบร้อย
ตัวอย่างการเพิ่มแผนที่ Google Map
เข้าไปที่หน้าแก้ไข Page ด้วย WordPress Block Editor จากนั้นที่เมนูด้านซ้ายเลือก WP Map Block ลงมายังพื้นที่ Content Canvas
ที่แท็บเมนู Block ทางด้านขวา ให้เลือกแผนที่ที่ต้องการ ในที่นี้จะเลือกเป็น Google Map
จากนั้นให้คลิกที่คำว่า Edit ที่ Marker 1 เพื่อเข้าไปแก้ไขตำแหน่งของ Marker ที่ใช้ระบุที่ตั้งบริษัทหรือร้านค้าของเรา
ระบุละติจูดและลองจิจูดที่ต้องการ, ใส่ Title รวมถึงกรอกคำอธิบายที่ Content และคลิกที่ปุ่ม Save & Close
เมื่อเข้าไปดูที่หน้าเว็บ ก็จะเห็นว่าแผนที่ได้ถูกแสดงแล้ว
สรุป
ก็ถือเป็นปลั๊กอินที่ใช้แสดงแผนที่ด้วย Gutenberg Blockที่ใช้งานได้ง่ายและสะดวก แสดงแผนที่ได้ Google Map และ OpenStreet Map โดยการระบุตำแหน่ง Marker ซึ่งเป็นตำแหน่งของบริษัทหรือร้านค้าของเรานั้นจะใช้การใส่ละติจูดและลองจิจูด ทำให้ได้ตำแหน่งที่แม่นยำ และสามารถระบุตำแหน่ง Marker หลายตำแหน่งพร้อมกันได้ รวมกัึงปรับขนาดความ Width, Height ของแผนที่ และระดับการซูมที่ตอนแสดงผลได้
Related Posts
