วิธีสร้างแผนที่ Google ด้วยหลายพินใน WordPress

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

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

ในโพสต์นี้เราจะครอบคลุมการสอนโดยละเอียดเกี่ยวกับวิธีสร้างแผนที่ Google ด้วยพินหลายตัวใน WordPress ด้วย Elementor แต่ก่อนหน้านั้นเราจะครอบคลุมคำสองสามคำว่าทำไมและเมื่อใดที่คุณควรใช้ Google Maps ด้วยพินหลายตัวบนเว็บไซต์ WordPress ของคุณ

เหตุใดจึงใช้ Google Maps ที่มีพินหลายตัวบนไซต์ WordPress ของคุณ

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

1. แสดงสถานที่ทั้งหมดของคุณในที่เดียว

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

2. ช่วยให้ผู้ใช้ค้นหาจุดที่ใกล้ที่สุด

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

3. ประหยัดเวลาสำหรับผู้เข้าชม

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

4. เพิ่ม SEO ในพื้นที่พร้อมข้อมูลตำแหน่ง

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

5. ทำให้ไซต์ของคุณโต้ตอบมากขึ้น

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

6. เหมาะสำหรับธุรกิจที่ใช้บริการหรือหลายสาขา

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

ข้อกำหนดเบื้องต้นสำหรับการสร้างแผนที่ Google ด้วยพินหลายตัวด้วย Elementor

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

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

ดังนั้นโดยรวมคุณต้องใช้เครื่องมือต่อไปนี้ในเว็บไซต์ของคุณสำหรับบทช่วยสอนนี้

• ผู้ประกอบการ
• Happyaddons
• Happyaddons Pro

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

วิธีสร้างแผนที่ Google ด้วยพินหลายตัวใน WordPress: การสอนทีละขั้นตอน

ในส่วนนี้เราจะอธิบายวิธีการสร้างแผนที่ Google ด้วยพินหลายตัวใน WordPress ด้วยปลั๊กอิน Elementor และ HappyAddons เราจะตกแต่งส่วนนี้ด้วยภาพหน้าจอที่จำเป็นเช่นกันเพื่อให้คุณสามารถเข้าใจกระบวนการทั้งหมด อ่านต่อไป!

ขั้นตอนที่ 01: เปิดหน้าและค้นหาวิดเจ็ต Google Map ขั้นสูง

เปิดโพสต์หรือหน้าเว็บที่คุณต้องการสร้างแผนที่ Google ด้วยพินหลายตัว ค้นหา วิดเจ็ต Google แผนที่ล่วงหน้า บนแผง Elementor ลากและวางลง บนผืนผ้าใบ Elementor

ขั้นตอนที่ 02: รับคีย์ Google API

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

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

คุณจะมาที่หน้า Google Cloud

ตอนนี้คุณต้องค้นหา 'แผนที่ JavaScript API' สำหรับสิ่งนี้ให้พิมพ์ แผนที่ JavaScript API ในช่องค้นหา เมื่อตัวเลือกปรากฏขึ้น ให้คลิก

หลังจากมาที่หน้าแผนที่ JavaScript API ให้เปิดใช้งานตัวเลือก

กด ปุ่ม ตกลงและดำเนินการต่อ ก่อนหน้านั้นคุณสามารถเลือกประเทศของคุณ เราเบลอสำหรับกรณีของเรา

คีย์ Google API ไม่ได้ใช้เทคนิคฟรี คุณต้องกรอกข้อมูลการเรียกเก็บเงินเพื่อรับ API

หมายเหตุ (วิธีการฟรี): แม้ว่าจะไม่ได้ฟรีทางเทคนิค แต่คุณจะได้รับโทเค็นเทียบเท่ากับ $ 200 ต่อเดือนต่อเดือน ไม่มีค่าใช้จ่าย ด้วยโทเค็นนี้แผนที่ Google ของคุณสามารถโหลดหรือดูได้มากถึง 28,000 ครั้ง เฉพาะในกรณีที่การข้ามมุมมอง/โหลดนี้จะถูกเรียกเก็บเงินบัตรของคุณ

หลังจากนั้นคุณจะได้รับป๊อปอัป คุณต้องให้ข้อมูลบางอย่างเกี่ยวกับธุรกิจของคุณที่จะใช้แผนที่นี้ เมื่อเสร็จแล้ว ให้คลิก ปุ่ม ส่ง ที่มุมล่างขวาของป๊อปอัป

คีย์ Google Map API จะปรากฏขึ้นบนหน้าจอทันทีด้วยป๊อปอัพใหม่ คัดลอกคีย์ API

กลับไปที่คีย์คีย์ Google API Happyaddons และ วางรหัสของคุณ ที่นั่น กด ปุ่ม บันทึกการเปลี่ยนแปลง ในที่สุด

ตอนนี้มาที่ผืนผ้าใบ Elementor ของคุณและรีเฟรช/โหลดใหม่ แผนที่ Google จะปรากฏบนผืนผ้าใบ

ตรวจสอบวิธีการสร้างไทม์ไลน์ใน WordPress ด้วย Elementor

ขั้นตอนที่ 03: เพิ่มหลายพินลงในแผนที่

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

หลังจากขยายส่วนเครื่องหมายแผนที่แล้วคุณสามารถเพิ่มพินได้มากเท่าที่คุณต้องการโดย คลิก ปุ่ม + เพิ่มรายการ

ตอนนี้ด้วยการวางค่าสำหรับละติจูดและลองจิจูดคุณสามารถตั้งค่าพินได้อย่างแม่นยำสำหรับแต่ละสถานที่

ขั้นตอนที่ 04: กำหนดค่าการตั้งค่าแผนที่

ในทำนองเดียวกัน ขยาย ส่วน การตั้งค่าแผนที่

คุณจะพบตัวเลือกมากมายในส่วนนี้

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

เรียนรู้วิธีสร้างแกลเลอรี่ภาพที่เลื่อนอัตโนมัติใน WordPress

ขั้นตอนที่ 05: จัดแต่งวิดเจ็ตแผนที่ Google ขั้นสูง

เมื่อการตั้งค่าและชิ้นส่วนเนื้อหาทั้งหมดเสร็จสิ้นมาที่ แท็บสไตล์ จากที่นี่คุณสามารถปรับแต่งความสูงความกว้างประเภทชายแดนรัศมีเส้นขอบและตัวเลือกอื่น ๆ

ในทำนองเดียวกันให้ขยายตัวเลือกอื่น ๆ เช่นกันและทำการปรับแต่งที่จำเป็นตามที่คุณต้องการเปลี่ยนการปรากฏตัวของหมุด

ขั้นตอนที่ 06: ดูตัวอย่างการออกแบบ

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

ดังนั้นคุณสามารถสร้างแผนที่ Google ด้วยพินหลายตัวใน WordPress ด้วย Elementor

เคล็ดลับขั้นสูงสำหรับ Google Map ที่มีหลายพิน

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

1. ใช้ภาพที่กำหนดเองแทนไอคอน

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

2. การซูมและการตั้งค่ากลาง

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

3. ทำให้เป็นมิตรกับมือถือ

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

4. แผนที่ฝังในหน้าติดต่อหรือสถานที่ตั้ง

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

เรียนรู้วิธีสร้างหน้าเว็บแบบไดนามิกใน WordPress ด้วย Elementor

บทสรุป

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

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

เราจะกลับมาหาคุณเร็ว ๆ นี้พร้อมกับตอบกลับได้ ขอบคุณที่อยู่กับเราจนจบ แจ้งให้เราทราบว่าหัวข้อใดที่คุณต้องการให้เราครอบคลุมในโพสต์ถัดไป