Saltearse al contenido

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:

Mapa con marcadores
Mapa con marcadores de mapa
  • 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.

Los mapas se pueden crear de dos maneras:

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.

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.

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

  1. Ponle un nombre para que puedas recordar de qué se trata el mapa.
  2. Elija si desea que el usuario pueda moverse por el mapa.
  3. Establece la altura, en píxeles, que quieres que tenga el mapa.
  4. Elija si desea que el usuario pueda acercar y alejar el mapa.
  5. Elija un estilo de mapa que combine con el sitio web en el que insertará el mapa.
  6. Elija un color de marcador.
  7. Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
  8. 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.
  9. 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.

Mapa
Una entrada de mapa con el menú de acciones contraído

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.

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

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