Ga naar inhoud
Academy

Kaarten

Een kaart vertegenwoordigt ofwel een enkele leverancier (bijv. hotel of aanbieder van ervaringen) of inventaris (d.w.z. kamertype, vergaderruimte, spa, enz.) of een verzameling inventaris zoals een samengestelde lijst of opgeslagen zoekopdracht en toont die details via een interactieve kaart met boekbare kaartmarkeringen. Een gebruiker kan op de volgende manieren met een kaart interageren:

Kaart met markeringen
Kaart met kaartmarkeringen
  • Zoom in, pan en sleep de kaart om beschikbare inventaris te zien.
  • Klik op een kaartmarkering om inventarisdetails te zien in de vorm van een Card.
Kaart met geopende kaart
Kaart met boekbare inventaris

De rest van dit artikel leidt je door het proces van het maken, aanpassen en delen van je kaarten.

Maak een kaart

Section titled “Maak een kaart”

Kaarten kunnen op twee manieren worden gemaakt:

Kaart met één markering

Section titled “Kaart met één markering”
Acties
Acties in zoekresultaten

Bovenstaande afbeelding is genomen uit Zoeken en toont enkele van de dingen die je met je zoekresultaten kunt doen. Een van die acties is Maak een kaart. Klik op die knop en je wordt doorgestuurd naar onze kaartformulierpagina waar je kunt beginnen met het aanpassen van je kaart.

Kaart met meerdere markeringen

Section titled “Kaart met meerdere markeringen”

Zowel samengestelde lijsten als opgeslagen zoekopdrachten hebben een actie waarmee je een kaart kunt maken. Deze kaart bevat kaartmarkeringen voor alle inventaris binnen die lijsten.

Kaart aanpassen

Section titled “Kaart aanpassen”

Het formulier stelt je in staat je kaart op de volgende manieren aan te passen:

  1. Geef het een naam zodat je weet waar de kaart over gaat.
  2. Kies of je wilt dat de gebruiker de kaart mag verplaatsen.
  3. Stel in hoe hoog, in pixels, je de kaart wilt hebben.
  4. Kies of je wilt dat de gebruiker mag in- en uitzoomen op de kaart.
  5. Kies een kaartstijl die past bij de website waarin je de kaart gaat insluiten.
  6. Kies een markeerkleur.
  7. Selecteer het initiële kaartvlak dat je wilt dat gebruikers als eerste zien. Standaard is dit het native vlak van die inventaris.
  8. Je kunt je eigen markeringen, cirkels, rechthoeken en polygonen toevoegen om andere locaties op de kaart aan te geven die je gebruikers interessant kunnen vinden.
  9. Klik op de knop Opslaan om door te gaan.

Na het opslaan van je kaart word je doorgestuurd naar je kaartenpagina en is je kaart klaar om met de wereld te worden gedeeld.

Kaart delen

Section titled “Kaart delen”
Kaart
Een kaartitem met ingeklapt actiemenu

Bovenstaande afbeelding toont alle beschikbare acties voor je kaart:

  • Bijwerken Werk je kaartconfiguratie bij.
  • Toevoegen aan WinkLinks Voegt de kaart toe aan je WinkLinks-account.
  • Insluiten Laat zien hoe je deze kaart als een Map in je website kunt insluiten.
  • Gebruik met WordPress Laat zien hoe je onze WordPress-plugin kunt gebruiken om deze kaart in je website in te sluiten.

We behandelen enkele van deze opties hieronder uitgebreider.

Insluiten

Section titled “Insluiten”
<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>

Hier zie je hoe je je kaart in je site insluit:

  • Regel 3 toont hoe je de Wink-stijlen in je site insluit.
  • Regels 6 tot en met 9 tonen hoe je de wink-content-loader Web Component gebruikt en deze vertelt een advertentiebanner voor je code op te halen.
  • Regel 11 toont hoe je onze Javascript in je site insluit.
  • Regel 13 toont hoe je de wink-app-loader Web Component insluit en deze vertelt je pagina-instellingen op te halen.

API

Section titled “API”

Ontwikkelaars die kaarten willen beheren kunnen terecht bij Developers > API > Inventory.

Verdere lectuur

Section titled “Verdere lectuur”