Maps

Una mappa rappresenta un singolo fornitore (ad esempio un hotel o un fornitore di esperienze) o un inventario (ad esempio, tipologia di camera, sala riunioni, spa, ecc.) o una raccolta di inventari, come un elenco curato o una ricerca salvata, e ne espone i dettagli tramite una mappa interattiva contenente indicatori di mappa prenotabili. Un utente può interagire con una mappa nei seguenti modi:

Mappa con marcatori — *Mappa con indicatori di mappa*

Ingrandisci, sposta e trascina la mappa per visualizzare l’inventario disponibile.
Fare clic su un indicatore della mappa per visualizzare i dettagli dell’inventario sotto forma diCarta.

Mappa con carta aperta — *Mappa con inventario prenotabile*

Il resto dell’articolo ti spiegherà come creare, personalizzare e condividere le tue mappe.

Crea una mappa

Le mappe possono essere create in due modi:

Mappa a marcatore singolo: Crea una mappa da qualcosa che hai trovato mentrericerca.
Mappa multi-marcatore: Crea una mappa da unelenco curato O ricerca salvata.

Mappa a marcatore singolo

Qui sopra c’è un’immagine presa daRicercae ti mostra alcune delle cose che puoi fare con i risultati della tua ricerca. Una di queste azioni èMake a mapCliccando su quel pulsante verrai reindirizzato alla nostra pagina del modulo mappa, dove potrai iniziare a personalizzare la tua mappa.

Mappa multi-marcatore

Entrambi elenchi curati E ricerche salvateInclude un’azione che ti permette di creare una mappa. Questa mappa conterrà indicatori per tutti gli inventari presenti in quegli elenchi.

Personalizza la mappa

Il modulo consente di personalizzare la mappa nei seguenti modi:

Assegnale un nome, così potrai ricordare di cosa tratta la mappa.
Scegli se vuoi che all’utente sia consentito muoversi sulla mappa.
Imposta l’altezza in pixel della mappa.
Scegli se vuoi che l’utente possa ingrandire o ridurre la mappa.
Scegli uno stile di mappa che si adatti al sito web in cui intendi incorporare la mappa.
Scegli un colore per il pennarello.
Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
Puoi aggiungere i tuoi marcatori, cerchi, rettangoli e poligoni per indicare altri luoghi sulla mappa che i tuoi utenti potrebbero trovare interessanti.
Fare clic su Save pulsante per continuare.

Dopo aver salvato la mappa, verrai reindirizzato alla pagina delle mappe e la mappa sarà pronta per essere condivisa con il mondo.

Condividi la mappa

Qui sopra puoi vedere un’immagine con tutte le azioni disponibili per la tua mappa:

AggiornamentoAggiorna la configurazione della mappa.
Aggiungi a WinkLinksAggiunge la mappa al tuo account WinkLinks.
IncorporaTi mostra come incorporare questa mappa comeMappanel tuo sito web.
Utilizzo con WordPressTi mostra come utilizzare il nostroPlugin di WordPressper incorporare questa mappa nel tuo sito web.

Di seguito illustreremo più dettagliatamente alcune di queste opzioni.

Incorpora

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

Ecco come incorporare la mappa nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come utilizzare ilwink-content-loaderWeb Component e digli di recuperare un banner pubblicitario per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare ilwink-app-loaderWeb Component e indicagli di recuperare le preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che desiderano gestire le mappe possono andare suSviluppatori > API > Inventario.

Ulteriori letture

Scopri di più sulla nostra collezione diComponenti Web.
Scopri di più suPlugin Wink per WordPress.