Mappe

Una mappa rappresenta un singolo fornitore (ad esempio hotel o fornitore di esperienze) o inventario (cioè tipologia di camera, sala riunioni, spa ecc.) o una raccolta di inventario come una lista curata o una ricerca salvata e espone questi dettagli tramite una mappa interattiva contenente marker prenotabili. Un utente può interagire con una mappa nei seguenti modi:

Zoommare, spostare e trascinare la mappa per vedere l’inventario disponibile.
Cliccare su un marker della mappa per vedere i dettagli dell’inventario sotto forma di Card.

Mappa con card aperta — *Mappa con inventario prenotabile*

Il resto di questo articolo ti guida su come creare, personalizzare e condividere le tue mappe.

Crea una mappa

Le mappe possono essere create in due modi:

Mappa con singolo marker: Crea una mappa da qualcosa che hai trovato durante una ricerca.
Mappa con più marker: Crea una mappa da una lista curata o da una ricerca salvata.

Mappa con singolo marker

Sopra c’è un’immagine presa da Ricerca che mostra alcune delle azioni che puoi fare con i risultati della tua ricerca. Una di queste azioni è Crea una mappa. Clicca su quel pulsante e verrai reindirizzato alla pagina del modulo per la mappa dove potrai iniziare a personalizzarla.

Mappa con più marker

Sia le liste curate che le ricerche salvate hanno un’azione che ti permette di creare una mappa. Questa mappa conterrà marker per tutto l’inventario presente in quelle liste.

Personalizza la mappa

Il modulo ti permette di personalizzare la tua mappa nei seguenti modi:

Dagli un nome per ricordarti di cosa tratta la mappa.
Scegli se vuoi permettere all’utente di muoversi liberamente sulla mappa.
Imposta l’altezza, in pixel, che vuoi per la mappa.
Scegli se vuoi permettere all’utente di zoomare dentro e fuori dalla mappa.
Scegli uno stile di mappa che si abbini al sito web in cui incorporerai la mappa.
Scegli un colore per i marker.
Seleziona la faccia iniziale della card che vuoi che gli utenti vedano per prima. Di default è la faccia nativa di quell’inventario.
Puoi aggiungere i tuoi marker, cerchi, rettangoli e poligoni per indicare altre posizioni sulla mappa che i tuoi utenti potrebbero trovare interessanti.
Clicca il pulsante Salva per continuare.

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

Condividi la mappa

Sopra vedi un’immagine con tutte le azioni disponibili per la tua mappa:

Aggiorna Aggiorna la configurazione della tua mappa.
Aggiungi a WinkLinks Aggiunge la mappa al tuo account WinkLinks.
Incorpora Ti mostra come incorporare questa mappa come un Map nel tuo sito web.
Usa con WordPress Ti mostra come usare il nostro plugin WordPress per incorporare questa mappa nel tuo sito web.

Di seguito approfondiamo 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 tua mappa nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come usare il Web Component wink-content-loader e indicargli 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 il Web Component wink-app-loader e indicargli di recuperare le tue preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che vogliono gestire le mappe possono andare su Developers > API > Inventory.

Ulteriori letture

Scopri di più sulla nostra collezione di Web Components.
Scopri di più sul plugin WordPress di Wink.