Maps

Un mapa representa un único proveedor (p. ej., un hotel o un proveedor de experiencias) o un inventario (p. ej., tipo de habitación, sala de reuniones, spa, etc.) o una colección de inventarios, como una lista seleccionada o una búsqueda guardada, y muestra esos detalles mediante un mapa interactivo con marcadores que se pueden reservar. El usuario puede interactuar con un mapa de las siguientes maneras:

Amplíe, desplace y arrastre el mapa para ver el inventario disponible.
Haga clic en un marcador de mapa para ver los detalles del inventario en forma deTarjeta.

Mapa con tarjeta abierta — *Mapa con inventario reservable*

El resto de este artículo le mostrará cómo crear, personalizar y compartir sus mapas.

Crear un mapa

Los mapas se pueden crear de dos maneras:

Mapa de un solo marcador:Crea un mapa a partir de algo que hayas encontrado mientrasbúsqueda.
Mapa de marcadores múltiples:Crear un mapa a partir de unlista curada o búsqueda guardada.

Mapa de un solo marcador

Comportamiento — *Acciones de resultados de búsqueda*

Arriba hay una imagen tomada deBuscary te muestra algunas de las cosas que puedes hacer con tus resultados de búsqueda. Una de esas acciones esMake a mapHaz clic en ese botón y serás redirigido a nuestra página de formulario de mapas, donde podrás empezar a personalizar tu mapa.

Mapa de marcadores múltiples

Ambos listas seleccionadas y búsquedas guardadasIncluye una acción que permite crear un mapa. Este mapa contendrá marcadores para todo el inventario de esas listas.

Personalizar el mapa

El formulario le permite personalizar su mapa de las siguientes maneras:

Ponle un nombre para que puedas recordar de qué se trata el mapa.
Elija si desea que el usuario pueda moverse por el mapa.
Establece la altura, en píxeles, que quieres que tenga el mapa.
Elija si desea que el usuario pueda acercar y alejar el mapa.
Elija un estilo de mapa que combine con el sitio web en el que insertará el mapa.
Elija un color de marcador.
Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Puede agregar sus propios marcadores, círculos, rectángulos y polígonos para indicar otras ubicaciones en el mapa que sus usuarios podrían encontrar interesantes.
Haga clic en el Save botón para continuar.

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

Compartir mapa

Arriba se muestra una imagen con todas las acciones disponibles para su mapa:

ActualizarActualiza la configuración de tu mapa.
Añadir a WinkLinksAgrega el mapa a tu cuenta de WinkLinks.
EmpotrarLe muestra cómo incrustar este mapa como unMapaen su sitio web.
Usar con WordPressLe muestra cómo utilizar nuestroComplemento de WordPresspara incrustar este mapa en su sitio web.

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

Empotrar

<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 explicamos cómo integrar tu mapa en tu sitio:

La línea 3 le muestra cómo integrar los estilos Wink en su sitio.
Las líneas 6 a 9 le muestran cómo utilizar elcargador de contenido de winkComponente web y dígale que busque un banner publicitario para su código.
La línea 11 le muestra cómo integrar nuestro Javascript en su sitio.
La línea 13 le muestra cómo incrustar elCargador de aplicaciones winkComponente web y dígale que obtenga sus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran administrar mapas pueden dirigirse aDesarrolladores > API > Inventario.

Lectura adicional

Conozca más sobre nuestra colección deComponentes web.
Obtenga más información sobre elPlugin Wink para WordPress.