Buchungsmaschine Plus – Unterkunftszuordnung ausblenden oder ersetzen

Ein statisches Bild kann eine Abbildung der Wegbeschreibung sein, wie man zu deiner Unterkunft gelangt.

Schritt 1: Lade das neue Bild online hoch

Damit das Bild anstelle der Karte angezeigt wird, muss es auf einer der Bildhosting-Websites hochgeladen oder im Internet gespeichert sein.

1. Gehe zu http://imgbb.com/ und klicke auf Start Uploading, um das Bild von deinem Gerät auszuwählen
2. Wähle die Option Don't autodelete
3. Klicke auf Upload

4. Wähle im Abschnitt Embed Codes die Option Viewers' links
5. Kopiere den Link zu deinem Bild (Diesen Link benötigst du später für die folgenden Schritte)

Schritt 2: Kopiere die Bildadresse

1. Öffnen Sie ein Inkognito-Fenster in Ihrem Browser
2. Fügen Sie den Bild-Link ein (aus dem vorherigen Schritt kopiert) in dieses Inkognito-Fenster ein
3. Klicken Sie mit der rechten Maustaste und kopieren Sie die Bildadresse

Schritt 3 – Füge das Bild zu deiner Buchungsmaschine hinzu

• Zugriff auf die Seite Buchungsmaschine anpassen
• Füge den folgenden Code unter dem JavaScript-Feld im Abschnitt zur Anpassung der Buchungsmaschine hinzu
• Füge im untenstehenden Code die zuvor kopierte Bildadresse in die Bildquelle (img src) ein, wie unten gezeigt (ersetze den Text Hier die kopierte Bildadresse einfügen)

<script>
  // Wenn die Buchungsmaschine bereit ist
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // Lausche auf das Ereignis property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // Verstecke die aktuelle Karte
      map.style.display = 'none';
      // Beispiel für das Einfügen eines statischen Bildes
      map.insertAdjacentHTML('afterend', `<img src="Hier die kopierte Bildadresse einfügen" alt="Unterkunftskarte" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

Die Buchungsmaschine zeigt die Karte an, die Informationen zum Standort deiner Unterkunft aus den Systemeinstellungen abruft. Um diese Standardkarte durch Google Maps zu ersetzen, folge den untenstehenden Anweisungen.

Schritt 1 – Standortcode von Google Maps kopieren

1. Öffnen Sie Google Maps
2. Suchen Sie den Standort Ihrer Unterkunft
3. Klicken Sie auf Teilen

4. Klicken Sie auf Karte einbetten
5. Klicken Sie auf HTML kopieren (dadurch wird der gesamte Code kopiert). Der Code sollte mit <iframe beginnen und mit /iframe> enden.

Beispiel: Der unten rot markierte Code zeigt die Sprache der Karte, Englisch (en). Falls nötig, kannst du sie auf andere Sprachen ändern (z. B. Spanisch (es), Portugiesisch (pt) usw.).

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

Schritt 2 – Anpassungscode einfügen

• Kopieren Sie den folgenden Code und fügen Sie ihn auf der Seite Buchungsmaschine anpassen im Feld JavaScript ein:
• Ersetzen Sie den Text "Fügen Sie hier den kopierten Code von Google Maps ein" durch den Code, den Sie von Google Maps erhalten haben.
  • Wichtig: Bewahren Sie den Code in Anführungszeichen auf "".Erwartetes Ergebnis: "<iframe src=></iframe>";
• Stellen Sie sicher, dass die Breite auf 100 % eingestellt ist. Die Höhe ist normalerweise auf 45 eingestellt, kann aber erhöht werden, um eine längere Karte anzuzeigen.
• Speichern Sie Ihre Änderungen:

<!-- **START**  Ersetzen der Leaflet-Karte durch Google Maps **START** -->
<script>
  // Wenn die Buchungsmaschine bereit ist
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // Lauschen auf das Ereignis property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // Verstecke die aktuelle Karte
      map.style.display = 'none';

      // Beispiel für das Einbinden von Google Maps
      map.insertAdjacentHTML('afterend', 'Fügen Sie hier den kopierten Code von Google Maps ein');

    }, false);
  });
</script>
<!-- **END**  Ersetzen der Leaflet-Karte durch Google Maps **END** -->