Karten

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

Karte mit Markern — *Karte mit Kartenmarkern*

Zoomen, schwenken und ziehen Sie die Karte, um verfügbares Inventar zu sehen.
Klicken Sie auf einen Kartenmarker, um Inventardetails in Form einer Card zu sehen.

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

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

Karte erstellen

Karten können auf zwei Arten erstellt werden:

Einzelmarker-Karte: Erstellen Sie eine Karte aus etwas, das Sie beim Suchen gefunden haben.
Mehrfachmarker-Karte: Erstellen Sie eine Karte aus einer kuratierten Liste oder einer gespeicherten Suche.

Einzelmarker-Karte

Oben sehen Sie ein Bild aus der Suche, das einige der Aktionen zeigt, die Sie mit Ihren Suchergebnissen durchführen können. Eine dieser Aktionen ist Make a map. Klicken Sie auf diese Schaltfläche, und Sie werden zu unserer Kartenformularseite weitergeleitet, wo Sie mit der Anpassung Ihrer Karte beginnen können.

Mehrfachmarker-Karte

Sowohl kuratierte Listen als auch gespeicherte Suchen verfügen über eine Aktion, mit der Sie eine Karte erstellen können. Diese Karte enthält Kartenmarker für alle Inventare in diesen Listen.

Karte anpassen

Das Formular ermöglicht Ihnen, Ihre Karte auf folgende Weise anzupassen:

Geben Sie ihr einen Namen, damit Sie sich erinnern, worum es bei der Karte geht.
Wählen Sie, ob der Benutzer die Karte verschieben darf.
Legen Sie fest, wie hoch die Karte in Pixeln sein soll.
Wählen Sie, ob der Benutzer in die Karte hinein- und herauszoomen darf.
Wählen Sie einen Kartenstil, der zur Website passt, in die Sie die Karte einbetten.
Wählen Sie eine Markerfarbe.
Wählen Sie die anfängliche Kartenansicht, die Benutzer zuerst sehen sollen. Standardmäßig ist dies die native Ansicht des Inventars.
Sie können eigene Marker, Kreise, Rechtecke und Polygone hinzufügen, um andere interessante Orte auf der Karte zu markieren.
Klicken Sie auf die Schaltfläche Save, um fortzufahren.

Nach dem Speichern Ihrer Karte werden Sie zu Ihrer Kartenübersicht weitergeleitet und Ihre Karte ist nun bereit, mit der Welt geteilt zu werden.

Karte teilen

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

Update Aktualisiert Ihre Kartenkonfiguration.
Add to WinkLinks Fügt die Karte Ihrem WinkLinks-Konto hinzu.
Embed Zeigt Ihnen, wie Sie diese Karte als Map in Ihre Website einbetten.
Use with WordPress Zeigt Ihnen, wie Sie unser WordPress-Plugin verwenden, um diese Karte in Ihre Website einzubetten.

Einige dieser Optionen erläutern wir im Folgenden ausführlicher.

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 Website ein:

Zeile 3 zeigt, wie Sie die Wink-Styles in Ihre Website einbinden.
Die Zeilen 6 bis 9 zeigen, wie Sie die wink-content-loader Web-Komponente verwenden und ihr mitteilen, ein Werbebanner für Ihren Code zu laden.
Zeile 11 zeigt, wie Sie unser Javascript in Ihre Website einbinden.
Zeile 13 zeigt, wie Sie die wink-app-loader Web-Komponente einbinden und ihr mitteilen, Ihre Seitenkonfigurationspräferenzen zu laden.

API

Entwickler, die Karten verwalten möchten, können zu Developers > API > Inventory wechseln.

Weiterführende Literatur

Erfahren Sie mehr über unsere Sammlung von Web Components.
Erfahren Sie mehr über das Wink WordPress-Plugin.