Mapes

Un mapa representa un únic proveïdor (per exemple, hotel o proveïdor d’experiències) o inventari (és a dir, tipus d’habitació, sala de reunions, spa, etc.) o una col·lecció d’inventari com una llista seleccionada o una cerca guardada i exposa aquests detalls mitjançant un mapa interactiu que conté marcadors de mapa reservables. Un usuari pot interactuar amb un mapa de les següents maneres:

Fer zoom, desplaçar i arrossegar el mapa per veure l’inventari disponible.
Fer clic en un marcador del mapa per veure els detalls de l’inventari en forma d’una Card.

Mapa amb targeta oberta — *Mapa amb inventari reservable*

La resta d’aquest article t’explica com crear, personalitzar i compartir els teus mapes.

Crear un mapa

Els mapes es poden crear de dues maneres:

Mapa d’un sol marcador: Crea un mapa a partir d’alguna cosa que has trobat mentre cerques.
Mapa de múltiples marcadors: Crea un mapa a partir d’una llista seleccionada o una cerca guardada.

Mapa d’un sol marcador

A dalt tens una imatge presa de Cerca que et mostra algunes de les coses que pots fer amb els teus resultats de cerca. Una d’aquestes accions és Fer un mapa. Fes clic en aquest botó i et redirigirà a la pàgina del formulari del mapa on podràs començar a personalitzar el teu mapa.

Mapa de múltiples marcadors

Tant les llistes seleccionades com les cerques guardades disposen d’una acció que et permet crear un mapa. Aquest mapa contindrà marcadors de mapa per a tot l’inventari dins d’aquestes llistes.

Personalitzar mapa

El formulari et permet personalitzar el teu mapa de les següents maneres:

Dona-li un nom per recordar de què tracta el mapa.
Tria si vols permetre que l’usuari es pugui moure pel mapa.
Estableix l’alçada, en píxels, que vols que tingui el mapa.
Tria si vols permetre que l’usuari pugui fer zoom dins i fora del mapa.
Tria un estil de mapa que vagi amb el lloc web on incrustaràs el mapa.
Tria un color per al marcador.
Selecciona la cara inicial de la targeta que vols que els usuaris vegin primer. Per defecte, és la cara nativa d’aquest inventari.
Pots afegir els teus propis marcadors, cercles, rectangles i polígons per indicar altres ubicacions al mapa que els teus usuaris puguin trobar interessants.
Fes clic al botó Guardar per continuar.

Després de guardar el teu mapa, seràs redirigit a la pàgina dels teus mapes i el teu mapa ja estarà llest per compartir-lo amb el món.

Compartir mapa

A dalt tens una imatge amb totes les accions disponibles per al teu mapa:

Actualitzar Actualitza la configuració del teu mapa.
Afegir a WinkLinks Afegeix el mapa al teu compte de WinkLinks.
Incrustar Et mostra com incrustar aquest mapa com un Map al teu lloc web.
Ús amb WordPress Et mostra com utilitzar el nostre plugin de WordPress per incrustar aquest mapa al teu lloc web.

A continuació, expliquem algunes d’aquestes opcions amb més detall.

Incrustar

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

Aquí tens com incrustar el teu mapa al teu lloc:

La línia 3 et mostra com incrustar els estils de Wink al teu lloc.
Les línies 6 a 9 et mostren com utilitzar el Web Component wink-content-loader i indicar-li que carregui un banner publicitari per al teu codi.
La línia 11 et mostra com incrustar el nostre Javascript al teu lloc.
La línia 13 et mostra com incrustar el Web Component wink-app-loader i indicar-li que carregui les preferències de configuració a nivell de pàgina.

API

Els desenvolupadors que vulguin gestionar mapes poden anar a Developers > API > Inventory.

Lectures addicionals

Aprèn més sobre la nostra col·lecció de Web Components.
Aprèn més sobre el plugin de WordPress de Wink.