Cartes

Une carte représente soit un fournisseur unique (par exemple un hôtel ou un prestataire d’expérience), soit un inventaire (c’est-à-dire un type de chambre, une salle de réunion, un spa, etc.) ou une collection d’inventaire telle qu’une liste sélectionnée ou une recherche enregistrée, et expose ces détails via une carte interactive contenant des marqueurs de carte réservables. Un utilisateur peut interagir avec une carte de la manière suivante :

Zoomer, déplacer et faire glisser la carte pour voir l’inventaire disponible.
Cliquer sur un marqueur de carte pour voir les détails de l’inventaire sous forme de Card.

Carte avec carte ouverte — *Carte avec inventaire réservable*

Le reste de cet article vous guide pour créer, personnaliser et partager vos cartes.

Créer une carte

Les cartes peuvent être créées de deux manières :

Carte à marqueur unique : Créez une carte à partir de quelque chose que vous avez trouvé lors d’une recherche.
Carte à plusieurs marqueurs : Créez une carte à partir d’une liste sélectionnée ou d’une recherche enregistrée.

Carte à marqueur unique

Ci-dessus, une image tirée de la Recherche vous montre certaines des actions que vous pouvez effectuer avec vos résultats de recherche. L’une de ces actions est Créer une carte. Cliquez sur ce bouton et vous serez redirigé vers notre page de formulaire de carte où vous pourrez commencer à personnaliser votre carte.

Carte à plusieurs marqueurs

Les listes sélectionnées et les recherches enregistrées disposent toutes deux d’une action qui vous permet de créer une carte. Cette carte contiendra des marqueurs pour tout l’inventaire contenu dans ces listes.

Personnaliser la carte

Le formulaire vous permet de personnaliser votre carte de la manière suivante :

Donnez-lui un nom pour vous souvenir du sujet de la carte.
Choisissez si vous souhaitez que l’utilisateur puisse se déplacer sur la carte.
Définissez la hauteur, en pixels, que vous souhaitez pour la carte.
Choisissez si vous souhaitez que l’utilisateur puisse zoomer ou dézoomer sur la carte.
Choisissez un style de carte qui s’accorde avec le site web dans lequel vous allez intégrer la carte.
Choisissez une couleur de marqueur.
Sélectionnez la face initiale de la carte que vous souhaitez que les utilisateurs voient en premier. Par défaut, c’est la face native de cet inventaire.
Vous pouvez ajouter vos propres marqueurs, cercles, rectangles et polygones pour indiquer d’autres emplacements sur la carte que vos utilisateurs pourraient trouver intéressants.
Cliquez sur le bouton Enregistrer pour continuer.

Après avoir enregistré votre carte, vous êtes redirigé vers votre page de cartes et votre carte est maintenant prête à être partagée avec le monde.

Partager la carte

L’image ci-dessus vous montre toutes les actions disponibles pour votre carte :

Mettre à jour Met à jour la configuration de votre carte.
Ajouter à WinkLinks Ajoute la carte à votre compte WinkLinks.
Intégrer Vous montre comment intégrer cette carte en tant que Map dans votre site web.
Utiliser avec WordPress Vous montre comment utiliser notre plugin WordPress pour intégrer cette carte dans votre site web.

Nous détaillons certaines de ces options ci-dessous.

Intégrer

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

Voici comment intégrer votre carte dans votre site :

La ligne 3 vous montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 vous montrent comment utiliser le composant Web wink-content-loader et lui indiquer de récupérer une bannière publicitaire pour votre code.
La ligne 11 vous montre comment intégrer notre Javascript dans votre site.
La ligne 13 vous montre comment intégrer le composant Web wink-app-loader et lui indiquer de récupérer vos préférences de configuration au niveau de la page.

API

Les développeurs qui souhaitent gérer les cartes peuvent se rendre sur Développeurs > API > Inventaire.

Lectures complémentaires

En savoir plus sur notre collection de Web Components.
En savoir plus sur le plugin WordPress Wink.