Mapas

Un mapa representa ya sea un solo proveedor (por ejemplo, hotel o proveedor de experiencias) o inventario (es decir, tipo de habitación, sala de reuniones, spa, etc.) o una colección de inventario como una lista curada o búsqueda guardada y expone esos detalles a través de un mapa interactivo que contiene marcadores de mapa reservables. Un usuario puede interactuar con un mapa de las siguientes maneras:

Acercar, alejar y arrastrar el mapa para ver el inventario disponible.
Hacer clic en un marcador del mapa para ver detalles del inventario en forma de una Card.

Mapa con tarjeta abierta — *Mapa con inventario reservable*

El resto de este artículo te guía sobre cómo crear, personalizar y compartir tus mapas.

Crear un mapa

Los mapas pueden crearse de dos maneras:

Mapa de marcador único: Crea un mapa a partir de algo que encontraste mientras buscabas.
Mapa de múltiples marcadores: Crea un mapa a partir de una lista curada o búsqueda guardada.

Mapa de marcador único

Arriba hay una imagen tomada de Búsqueda y te muestra algunas de las cosas que puedes hacer con tus resultados de búsqueda. Una de esas acciones es Crear un mapa. Haz clic en ese botón y te redirigirá a nuestra página de formulario de mapas donde podrás comenzar a personalizar tu mapa.

Mapa de múltiples marcadores

Tanto las listas curadas como las búsquedas guardadas incluyen una acción que te permite crear un mapa. Este mapa contendrá marcadores para todo el inventario dentro de esas listas.

Personalizar mapa

El formulario te permite personalizar tu mapa de las siguientes maneras:

Dale un nombre para que recuerdes de qué trata el mapa.
Elige si quieres permitir que el usuario se mueva por el mapa.
Establece qué tan alto, en píxeles, quieres que sea el mapa.
Elige si quieres permitir que el usuario acerque y aleje el mapa.
Elige un estilo de mapa que combine con el sitio web en el que vas a incrustar el mapa.
Elige un color para el marcador.
Selecciona la cara inicial de la tarjeta que quieres que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Puedes agregar tus propios marcadores, círculos, rectángulos y polígonos para indicar otras ubicaciones en el mapa que tus usuarios podrían encontrar interesantes.
Haz clic en el botón Guardar para continuar.

Después de guardar tu mapa, serás redirigido a tu página de mapas y tu mapa estará listo para ser compartido con el mundo.

Compartir mapa

Arriba te mostramos una imagen con todas las acciones disponibles para tu mapa:

Actualizar Actualiza la configuración de tu mapa.
Agregar a WinkLinks Agrega el mapa a tu cuenta de WinkLinks.
Incrustar Te muestra cómo incrustar este mapa como un Map en tu sitio web.
Usar con WordPress Te muestra cómo usar nuestro plugin de WordPress para incrustar este mapa en tu sitio web.

A continuación, cubrimos algunas de estas opciones con más detalle.

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í te mostramos cómo incrustar tu mapa en tu sitio:

La línea 3 te muestra cómo incrustar los estilos de Wink en tu sitio.
Las líneas 6 a 9 te muestran cómo usar el Componente Web wink-content-loader y decirle que obtenga un banner publicitario para tu código.
La línea 11 te muestra cómo incrustar nuestro Javascript en tu sitio.
La línea 13 te muestra cómo incrustar el Componente Web wink-app-loader y decirle que obtenga tus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran administrar mapas pueden dirigirse a Developers > API > Inventory.

Lectura adicional

Aprende más sobre nuestra colección de Componentes Web.
Aprende más sobre el plugin de WordPress de Wink.