Aller au contenu

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 :

Carte avec marqueurs
Carte avec marqueurs de carte
  • 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.

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

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.

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.

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

  1. Donnez-lui un nom pour vous rappeler de quoi parle la carte.
  2. Choisissez si vous souhaitez que l’utilisateur soit autorisé à se déplacer sur la carte.
  3. Définissez la hauteur, en pixels, que vous souhaitez pour la carte.
  4. Choisissez si vous souhaitez que l’utilisateur soit autorisé à zoomer et dézoomer sur la carte.
  5. Choisissez un style de carte adapté au site Web dans lequel vous allez intégrer la carte.
  6. Choisissez une couleur de marqueur.
  7. 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.
  8. 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.
  9. 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.

Carte
Une entrée de carte avec un menu d’actions réduit

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.

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

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