คุณต้องการค้นหาวิธีสร้างแผนที่ที่มีหลายพินโดยใช้ Jet Elements หรือไม่

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

เมื่อต้องการใช้วิดเจ็ตนี้ คุณต้องรวม Jet Elements ด้วยก่อน Google แผนที่โดยใช้คีย์ API

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

นี่คือวิธีใช้วิดเจ็ตนี้

ขั้นตอนที่ 1: รวม JetElements กับ Google Maps

ตามที่กล่าวไว้ คุณต้องมีคีย์ API Google Maps เพื่อรวม Jet Elements เข้ากับ Google Maps คุณสามารถรับคีย์ API ได้ผ่านทางคอนโซล Google API

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

ตั้งชื่อโครงการของคุณและคลิกที่ปุ่ม CREATE .

เมื่อสร้างโครงการใหม่แล้ว ให้เลือกโครงการผ่านเมนูแบบเลื่อนลงที่ด้านบนของแดชบอร์ด Google API Console จากนั้นคลิก ห้องสมุด ที่แผงด้านซ้าย

Google แบ่ง Google Maps API ออกเป็น 17 ประเภท คุณต้องเปิดใช้งาน API ที่วิดเจ็ตแผนที่ขั้นสูงของ Jet Elements ต้องการเพื่อใช้วิดเจ็ตนี้ Crocoblock ผู้พัฒนา Jet Elements ไม่ได้ให้ข้อมูลโดยละเอียดเกี่ยวกับ API ที่จำเป็น จากประสบการณ์ของเรา เราได้เปิดใช้งาน API ต่อไปนี้:

  • ทิศทาง API
  • API การเข้ารหัสทางภูมิศาสตร์
  • แผนที่ JavaScript API
  • ที่นั่ง API

คุณสามารถคลิกที่ลิงค์ แสดงทั้งหมด ในส่วน แผนที่ เพื่อดูพวกเขาทั้งหมด

ในการเปิดใช้งาน API ให้เลือก API ที่เกี่ยวข้อง (โดยคลิกที่มัน) และคลิกที่ปุ่ม เปิดใช้งาน.

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

สร้างทัวร์เสมือนจริง 360 องศาใน WordPress ด้วย Elementor

ถัดไป ลงชื่อเข้าใช้แดชบอร์ด WordPress ของคุณและไปที่ JetPlugins -> การตั้งค่า JetElements.

คลิกที่แท็บ การผสานรวม และวางคีย์ API ของคุณในฟิลด์ รหัส Google Maps API ในส่วน Google Maps. เปิดใช้งานตัวเลือก แยกรหัส Geocoding API และวางรหัสเดียวกันบน คีย์ Geocoding API.

สร้างแผนที่ที่มีหลายหมุดโดยใช้ Jet Elements

ขั้นตอนที่ 2: สร้างแผนที่

เมื่อรวม Jet Elements และ Google Maps สำเร็จแล้ว คุณสามารถเริ่มสร้างแผนที่ได้ ในการดำเนินการนี้ ให้สร้างหน้าใหม่ (หน้า – > เพิ่ม) หรือบทความใหม่ (รายการ -> เพิ่ม) และแก้ไขด้วย Elementor.

ในกองบรรณาธิการ Elementorให้ตั้งค่าเค้าโครงก่อนที่จะเริ่ม ในการดำเนินการนี้ ให้เปิดแผงการตั้งค่าหน้าโดยคลิกไอคอนรูปเฟืองที่มุมซ้ายล่าง เลือกเค้าโครงจากเมนูแบบเลื่อนลงใต้ตัวเลือก การตั้งค่าทั่วไป.

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

สร้างแผนที่ที่มีหลายหมุดโดยใช้ Jet Elements

ตั้งศูนย์กลางของแผนที่เป็นเมืองของคุณ (หรือภูมิภาคใดก็ได้ขึ้นอยู่กับแผนที่ที่คุณต้องการสร้าง) ตั้งค่าการซูมเริ่มต้นด้วย

สร้างแผนที่ที่มีหลายหมุดโดยใช้ Jet Elements

เปิด Google Maps และค้นหาตำแหน่งแรกที่คุณต้องการเพิ่มลงในแผนที่และคัดลอกที่อยู่

กลับไปที่โปรแกรมแก้ไข Elementor และเปิดส่วน Pins. คลิกที่ตำแหน่งที่มีอยู่และแทนที่ที่อยู่ด้วยที่อยู่ที่คุณเพิ่งคัดลอก เพิ่มคำอธิบายของตำแหน่งบนฟิลด์ด้วย คำอธิบายพิน.

คลิกที่ปุ่ม เพิ่มองค์ประกอบ อยู่ต่ำกว่าเล็กน้อยเพื่อเพิ่มที่อยู่อื่น

หากต้องการเปลี่ยนรูปแบบของแผนที่ ตลอดจนความสูง คุณสามารถเปิดส่วนนี้ได้ รูปแบบแผนที่.

หมายเหตุ: หากไม่โหลดแผนที่หลังจากลากวิดเจ็ต แผนที่ขั้นสูง ในตัวแก้ไข Elementor และคุณเห็นข้อความ "เพื่อการพัฒนาเท่านั้น" ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการเรียกเก็บเงินของ Google แล้ว เมฆ. นโยบายใหม่ของ Google กำหนดให้นักพัฒนาต้องเปิดใช้งานบัญชีสำหรับการเรียกเก็บเงิน

รับ Elementor Pro ทันที!!!

สรุป

ดังนั้น ! สำหรับบทความนี้จะแสดงวิธีสร้างแผนที่ที่มีหลายพินโดยใช้ Jet Elements หากคุณมีข้อสงสัยเกี่ยวกับวิธีการเดินทาง โปรดแจ้งให้พวกเขาทราบใน ความเห็น.

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...