เครื่องมือการจอง Plus - ซ่อนหรือเปลี่ยนแผนที่ที่พักของคุณ

ภาพนิ่งสามารถเป็น ภาพ ของคำแนะนำเกี่ยวกับวิธีการถึงที่พักของคุณ

ขั้นตอนที่ 1 - อัปโหลดภาพใหม่ออนไลน์

เพื่อให้ภาพแสดงแทนที่แม็ป ต้องอัปโหลดหรือบันทึกบนอินเทอร์เน็ตในหนึ่งในเว็บไซต์โฮสต์ภาพ

1. ไปที่ http://imgbb.com/ และคลิก เริ่มอัปโหลด เพื่อเลือกภาพจากอุปกรณ์ของคุณ
2. เลือกตัวเลือก ไม่ลบอัตโนมัติ
3. คลิก อัปโหลด

4. เลือกตัวเลือก ลิงก์ของผู้ชม ในส่วนรหัสฝัง
5. คัดลอก ลิงก์ ของภาพของคุณ (คุณจะต้องใช้ลิงก์นี้ในภายหลังสำหรับขั้นตอนถัดไป)

ขั้นตอนที่ 2 - คัดลอกที่อยู่ภาพ

1. เปิด หน้าต่างไม่ระบุตัวตน บนเบราว์เซอร์ของคุณ
2. วางลิงก์ภาพ (คัดลอกจากขั้นตอนก่อนหน้า) ในหน้าต่างไม่ระบุตัวตนนี้
3. คลิกขวาและ คัดลอกที่อยู่ภาพ

ขั้นตอนที่ 3 - เพิ่มภาพไปยังเครื่องมือการจองของคุณ

• เข้าถึง ปรับแต่งเครื่องมือการจอง หน้า
• เพิ่มรหัสต่อไปนี้ใต้ ฟิลด์ JavaScript ของส่วนปรับแต่งเครื่องมือการจองของคุณ
• ในรหัสด้านล่าง วางที่อยู่ภาพ ที่ถูกคัดลอกมาก่อนหน้านี้ ในแหล่งที่มาของภาพ (img src) ตามที่แสดงด้านล่าง (แทนที่ เพิ่มที่อยู่ภาพที่คัดลอกที่นี่ ข้อความ)

<script>
  // เมื่อเครื่องมือการจองพร้อม
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // ฟังสำหรับอีเวนต์ property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // ซ่อนแม็ปปัจจุบัน
      map.style.display = 'none';
      // // ตัวอย่างการรวมภาพนิ่ง
      map.insertAdjacentHTML('afterend', `<img src="เพิ่มที่อยู่ภาพที่คัดลอกที่นี่" alt="แผนที่ที่พัก" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

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

ขั้นตอนที่ 1 - คัดลอกโค้ดตำแหน่งจาก Google Maps

1. เปิด Google Maps
2. ค้นหาตำแหน่งที่พัก
3. คลิกแชร์

4. คลิกฝังแม็ป
5. คลิกคัดลอก HTML (นี่จะคัดลอกโค้ดทั้งหมด) โค้ดควรเริ่มต้นด้วย <iframe และสิ้นสุดด้วย /iframe>

ตัวอย่าง: โค้ด ที่เน้นสีแดง ด้านล่างคือภาษาของแม็ป ภาษาอังกฤษ (en). หากจำเป็นคุณสามารถเปลี่ยนเป็นภาษาอื่น ๆ (เช่น สเปน (es), โปรตุเกส (pt), เป็นต้น)

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

ขั้นตอนที่ 2 - แทรกโค้ดการปรับแต่ง

• คัดลอกโค้ดด้านล่างและแทรกลงใน ปรับแต่งเครื่องมือการจอง หน้า, ใน ฟิลด์ JavaScript :
• แทนที่ ข้อความ "เพิ่มโค้ดที่คัดลอกจาก Google Maps" ที่นี่ด้วยโค้ดที่คุณได้รับจาก Google Maps
  • สำคัญ: เก็บไว้ภายในเครื่องหมายคำพูด "".ผลลัพธ์ที่คาดหวัง: "<iframe src=></iframe>";
• ตรวจสอบให้แน่ใจว่า width ตั้งค่าเป็น 100%. Height มักจะตั้งค่าเป็น 45 แต่คุณสามารถเพิ่มเพื่อแสดงแม็ปที่ยาวขึ้น
• บันทึกการเปลี่ยนแปลงของคุณ:

<!-- **START**  แทนที่แม็ป leaflet ด้วย Google Maps **START** -->
<script>
  // เมื่อเครื่องมือการจองพร้อม
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // ฟังสำหรับอีเวนต์ property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // ซ่อนแม็ปปัจจุบัน
      map.style.display = 'none';

      // // ตัวอย่างการรวม Google Maps
      map.insertAdjacentHTML('afterend', "เพิ่มโค้ดที่คัดลอกจาก Google Maps ที่นี่");

    }, false);
  });
</script>
<!-- **END**  แทนที่แม็ป leaflet ด้วย Google Maps **END** -->