Rezervasyon Motoru Plus - Tesis Haritanızı Gizleme veya Değiştirme

Statik bir görsel, tesisine nasıl ulaşılacağına dair yol tarifi resmi olabilir.

Adım 1 - Yeni görseli çevrimiçi yükle

Görselin harita yerine gösterilmesi için, görselin internet üzerinde bir görsel barındırma sitesine yüklenmesi veya kaydedilmesi gerekir.

1. http://imgbb.com/ sitesine git ve cihazından görseli seçmek için Yüklemeye Başla butonuna tıkla
2. Otomatik silme seçeneğini devre dışı bırak
3. Yükle butonuna tıkla

4. Embed Kodları bölümünde İzleyicilerin bağlantıları seçeneğini seç
5. Görselinin bağlantısını kopyala (Bu bağlantıya sonraki adımlarda ihtiyacın olacak)

Adım 2 - Görsel Adresini Kopyala

1. Tarayıcında bir gizli pencere aç
2. Görsel bağlantısını yapıştır (önceki adımdan kopyalanan) bu gizli pencerede
3. Sağ tıkla ve görsel adresini kopyala

Adım 3 - Görseli Rezervasyon Motoruna Ekle

• Rezervasyon Motoru Özelleştir sayfasına eriş
• Aşağıdaki kodu Rezervasyon Motoru Özelleştir bölümündeki JavaScript alanının altına ekle
• Aşağıdaki kodda, daha önce kopyalanan görsel adresini görsel kaynağı (img src) kısmına yapıştır (Aşağıda gösterildiği gibi Buraya kopyalanan görsel adresini ekle metnini değiştirerek)

<script>
  // Rezervasyon Motoru Hazır Olduğunda
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // property-map-loaded etkinliğini dinle
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // mevcut haritayı gizle
      map.style.display = 'none';
      // // Statik bir görsel ekleme örneği
      map.insertAdjacentHTML('afterend', `<img src="Buraya kopyalanan görsel adresini ekle" alt="Tesis Haritası" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

Rezervasyon Motoru, sistem ayarlarından tesis konumunuzla ilgili bilgileri çeken haritayı gösterir. Bu varsayılan haritayı Google Haritalar ile değiştirmek için aşağıdaki talimatları takip et.

Adım 1 - Google Haritalar’dan konum kodunu kopyala

1. Google Haritalar’ı aç
2. Tesisinin konumunu bul
3. Paylaş butonuna tıkla

4. Harita göm seçeneğine tıkla
5. HTML Kopyala butonuna tıkla (bu tüm kodu kopyalar). Kod <iframe ile başlamalı ve /iframe> ile bitmelidir.

Örnek: Aşağıda kırmızı ile vurgulanan kod haritanın dilini, İngilizceyi (en) gösterir. Gerekirse bunu diğer dillere (örneğin İspanyolca (es), Portekizce (pt) vb.) değiştirebilirsin.

<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>

Adım 2 - Özelleştirme kodunu ekle

• Aşağıdaki kodu kopyala ve Rezervasyon Motorunu Özelleştir sayfasındaki JavaScript alanına yapıştır.
• "Google Maps'ten kopyaladığın kodu buradaki "Google Maps'ten kopyalanan kodu ekle" metni ile değiştir.
  • Önemli: Kodun tırnak işaretleri içinde "" kalmasına dikkat et. Beklenen sonuç: "<iframe src=></iframe>";
• width değerinin %100 olarak ayarlı olduğundan emin ol. height genellikle 45 olarak ayarlanır, ancak daha uzun bir harita göstermek için artırabilirsin.
• Değişikliklerini kaydet:

<!-- **BAŞLANGIÇ** Leaflet haritasını Google Maps ile değiştir **BAŞLANGIÇ** -->
<script>
  // Rezervasyon Motoru hazır olduğunda
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // property-map-loaded etkinliğini dinle
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // mevcut haritayı gizle
      map.style.display = 'none';

      // // Google Maps ekleme örneği
      map.insertAdjacentHTML('afterend', "Google Maps'ten kopyalanan kodu ekle");

    }, false);
  });
</script>
<!-- **BİTİŞ** Leaflet haritasını Google Maps ile değiştir **BİTİŞ** -->