Maps

Eine Karte stellt entweder einen einzelnen Anbieter (z. B. ein Hotel oder einen Erlebnisanbieter) oder ein Inventar (z. B. Zimmertyp, Tagungsraum, Spa usw.) oder eine Sammlung von Inventaren wie eine kuratierte Liste oder eine gespeicherte Suche dar und zeigt diese Details über eine interaktive Karte mit buchbaren Kartenmarkierungen an. Ein Nutzer kann auf folgende Weise mit einer Karte interagieren:

Karte mit Markierungen — *Karte mit Kartenmarkierungen*

Zoomen, schwenken und ziehen Sie die Karte, um den verfügbaren Bestand anzuzeigen.
Klicken Sie auf eine Markierung auf der Karte, um die Inventardetails in Form einerKarte.

Karte mit geöffneter Karte — *Karte mit buchbarem Inventar*

Der Rest dieses Artikels führt Sie durch die Erstellung, Anpassung und Freigabe Ihrer Karten.

Erstellen einer Karte

Karten können auf zwei Arten erstellt werden:

Einzelmarkierungskarte: Erstellen Sie eine Karte aus etwas, das Sie gefunden haben, währendSuche.
Karte mit mehreren Markierungen: Erstellen Sie eine Karte aus einerkuratierte Liste oder gespeicherte Suche.

Einzelmarkierungskarte

Oben ist ein Bild ausSuchenund zeigt Ihnen einige der Dinge, die Sie mit Ihren Suchergebnissen tun können. Eine dieser Aktionen istMake a map. Klicken Sie auf diese Schaltfläche. Sie werden dann zu unserer Kartenformularseite weitergeleitet, wo Sie mit der Anpassung Ihrer Karte beginnen können.

Karte mit mehreren Markierungen

Beidekuratierte Listen Und gespeicherte SuchvorgängeMit der Aktion „Karte erstellen“ können Sie eine Karte erstellen. Diese Karte enthält Markierungen für alle Bestände in diesen Listen.

Karte anpassen

Mit dem Formular können Sie Ihre Karte auf folgende Weise anpassen:

Geben Sie ihr einen Namen, damit Sie sich daran erinnern, worum es auf der Karte geht.
Wählen Sie, ob der Benutzer sich auf der Karte bewegen darf.
Legen Sie die gewünschte Höhe der Karte in Pixeln fest.
Wählen Sie, ob der Benutzer die Karte vergrößern und verkleinern dürfen soll.
Wählen Sie einen Kartenstil, der zu der Website passt, in die Sie die Karte einbetten möchten.
Wählen Sie eine Markierungsfarbe.
Wählen Sie die Kartenseite aus, die den Benutzern zuerst angezeigt werden soll. Standardmäßig ist dies die native Seite dieses Inventars.
Sie können Ihre eigenen Markierungen, Kreise, Rechtecke und Polygone hinzufügen, um andere Orte auf der Karte anzuzeigen, die für Ihre Benutzer interessant sein könnten.
Klicken Sie auf das Save Schaltfläche, um fortzufahren.

Nachdem Sie Ihre Karte gespeichert haben, werden Sie auf Ihre Kartenseite weitergeleitet und können sie nun mit der Welt teilen.

Karte teilen

Oben sehen Sie ein Bild mit allen verfügbaren Aktionen für Ihre Karte:

AktualisierenAktualisiert Ihre Kartenkonfiguration.
Zu WinkLinks hinzufügenFügt die Karte Ihrem WinkLinks-Konto hinzu.
EinbettenZeigt Ihnen, wie Sie diese Karte einbetten alsKartein Ihre Website.
Verwendung mit WordPressZeigt Ihnen, wie Sie unsereWordPress-Pluginum diese Karte in Ihre Website einzubetten.

Einige dieser Optionen werden im Folgenden ausführlicher behandelt.

Einbetten

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="MAP"
       id="64d7cbc8-61df-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

So betten Sie Ihre Karte in Ihre Site ein:

Zeile 3 zeigt Ihnen, wie Sie die Wink-Stile in Ihre Site einbetten.
Die Zeilen 6 bis 9 zeigen Ihnen, wie Sie dieWink-InhaltsladerWebkomponente und weisen Sie sie an, ein Werbebanner für Ihren Code abzurufen.
Zeile 11 zeigt Ihnen, wie Sie unser Javascript in Ihre Site einbetten.
Zeile 13 zeigt Ihnen, wie Sie dieWink-App-LoaderWebkomponente und weisen Sie sie an, Ihre Konfigurationseinstellungen auf Seitenebene abzurufen.

API

Entwickler, die Karten verwalten möchten, können zuEntwickler > API > Inventar.

Weiterführende Literatur

Erfahren Sie mehr über unsere Sammlung vonWebkomponenten.
Erfahren Sie mehr über dieWink WordPress-Plugin.