Maps

Une carte représente soit un fournisseur unique (par exemple, un hôtel ou un prestataire d’expériences), soit un inventaire (par exemple, un type de chambre, une salle de réunion, un spa, etc.), soit un ensemble d’inventaires, comme une liste organisée ou une recherche enregistrée, et expose ces détails via une carte interactive contenant des marqueurs réservables. Un utilisateur peut interagir avec une carte des manières suivantes :

Zoomez, déplacez et faites glisser la carte pour voir l’inventaire disponible.
Cliquez sur un marqueur de carte pour voir les détails de l’inventaire sous la forme d’unCarte.

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

Le reste de cet article vous explique comment 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é pendantrecherche.
Carte multi-marqueurs: Créer une carte à partir d’unliste organisée ou recherche enregistrée.

Carte à marqueur unique

Actes — *Actions des résultats de recherche*

Ci-dessus, une image prise à partir deRechercheet vous présente quelques actions possibles avec vos résultats de recherche. L’une de ces actions estMake a mapCliquez sur ce bouton et vous serez redirigé vers notre page de formulaire de carte où vous pourrez commencer à personnaliser votre carte.

Carte multi-marqueurs

Les deux listes organisées et recherches enregistréesFourni avec une action permettant de créer une carte. Cette carte contiendra des marqueurs pour tout l’inventaire de ces listes.

Personnaliser la carte

Le formulaire vous permet de personnaliser votre carte des manières suivantes :

Donnez-lui un nom pour vous rappeler de quoi parle la carte.
Choisissez si vous souhaitez que l’utilisateur soit autorisé à 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 soit autorisé à zoomer et dézoomer sur la carte.
Choisissez un style de carte adapté au site Web dans lequel vous allez intégrer la carte.
Choisissez une couleur de marqueur.
Sélectionnez la face de la carte que vous souhaitez montrer en premier aux utilisateurs. Par défaut, il s’agit de 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 Save bouton 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

Ci-dessus, vous trouverez une image avec toutes les actions disponibles pour votre carte :

Mise à jourMet à jour la configuration de votre carte.
Ajouter à WinkLinksAjoute la carte à votre compte WinkLinks.
IntégrerVous montre comment intégrer cette carte en tant queCartedans votre site Web.
Utiliser avec WordPressVous montre comment utiliser notreplugin WordPresspour intégrer cette carte dans votre site Web.

Nous couvrons certaines de ces options, plus en détail, 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 lechargeur de contenu winkComposant Web et dites-lui 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 lechargeur d’application winkComposant Web et dites-lui de récupérer vos préférences de configuration au niveau de la page.

API

Les développeurs qui souhaitent gérer des cartes peuvent se rendre surDéveloppeurs > API > Inventaire.

Lectures complémentaires

En savoir plus sur notre collection deComposants Web.
En savoir plus sur lePlugin WordPress Wink.