Mapas

Um mapa representa um único fornecedor (por exemplo, hotel ou provedor de experiências) ou inventário (ou seja, tipo de quarto, sala de reunião, spa etc) ou uma coleção de inventário, como uma lista selecionada ou busca salva, e expõe esses detalhes por meio de um mapa interativo contendo marcadores de mapa reserváveis. Um usuário pode interagir com um mapa das seguintes maneiras:

Dar zoom, mover e arrastar o mapa para ver o inventário disponível.
Clicar em um marcador no mapa para ver detalhes do inventário na forma de um Card.

Mapa com card aberto — *Mapa com inventário reservável*

O restante deste artigo explica como criar, personalizar e compartilhar seus mapas.

Criar um mapa

Mapas podem ser criados de duas formas:

Mapa com marcador único: Crie um mapa a partir de algo que você encontrou enquanto buscava.
Mapa com múltiplos marcadores: Crie um mapa a partir de uma lista selecionada ou busca salva.

Mapa com marcador único

Acima está uma imagem retirada da Busca que mostra algumas das coisas que você pode fazer com seus resultados de busca. Uma dessas ações é Criar um mapa. Clique nesse botão e você será redirecionado para a página do formulário de mapa, onde poderá começar a personalizar seu mapa.

Mapa com múltiplos marcadores

Tanto as listas selecionadas quanto as buscas salvas possuem uma ação que permite criar um mapa. Esse mapa conterá marcadores para todo o inventário dentro dessas listas.

Personalizar mapa

O formulário permite personalizar seu mapa das seguintes formas:

Dê um nome para que você se lembre do que se trata o mapa.
Escolha se deseja permitir que o usuário mova o mapa.
Defina a altura, em pixels, que deseja para o mapa.
Escolha se deseja permitir que o usuário dê zoom in e zoom out no mapa.
Escolha um estilo de mapa que combine com o site onde o mapa será incorporado.
Escolha uma cor para o marcador.
Selecione a face inicial do card que deseja que os usuários vejam primeiro. Por padrão, é a face nativa daquele inventário.
Você pode adicionar seus próprios marcadores, círculos, retângulos e polígonos para indicar outros locais no mapa que seus usuários possam achar interessantes.
Clique no botão Salvar para continuar.

Após salvar seu mapa, você será redirecionado para sua página de mapas e seu mapa estará pronto para ser compartilhado com o mundo.

Compartilhar mapa

Acima você vê uma imagem com todas as ações disponíveis para seu mapa:

Atualizar Atualiza a configuração do seu mapa.
Adicionar ao WinkLinks Adiciona o mapa à sua conta WinkLinks.
Incorporar Mostra como incorporar este mapa como um Map em seu site.
Usar com WordPress Mostra como usar nosso plugin WordPress para incorporar este mapa em seu site.

Cobrimos algumas dessas opções, com mais detalhes, abaixo.

Incorporar

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

Aqui está como incorporar seu mapa em seu site:

A linha 3 mostra como incorporar os estilos Wink em seu site.
As linhas 6 a 9 mostram como usar o Web Component wink-content-loader e instruí-lo a buscar um banner de anúncio para seu código.
A linha 11 mostra como incorporar nosso Javascript em seu site.
A linha 13 mostra como incorporar o Web Component wink-app-loader e instruí-lo a buscar suas preferências de configuração em nível de página.

API

Desenvolvedores que desejam gerenciar mapas podem acessar Developers > API > Inventory.

Leitura adicional

Saiba mais sobre nossa coleção de Web Components.
Saiba mais sobre o plugin WordPress do Wink.