Motor de Reservas Plus - Ocultando ou Substituindo o Mapa da sua Propriedade

Uma imagem estática pode ser uma imagem de direções sobre como alcançar sua propriedade.

Passo 1 - Carregue a nova imagem on-line

Para que a imagem seja exibida em vez do mapa, ela precisa ser carregada ou salva na internet em um dos sites de hospedagem de imagens.

1. Vá para http://imgbb.com/, e clique em Começar carregamento para selecionar a imagem do seu dispositivo;
2. Selecione a opção Não excluir automaticamente;
3. Clique em Carregar;

4. Selecione a opção Links dos visualizadores na seção Códigos incorporados;
5. Copie o link da sua imagem. Você precisará deste link mais tarde, para as etapas a seguir.

Passo 2 - Copie o endereço da imagem

1. Abra uma janela anônima no seu navegador;
2. Cole o link da imagem (copiado no passo anterior) nesta janela anônima;
3. Clique com o botão direito e copie o endereço da imagem.

Passo 3 - Adicione a imagem ao seu Motor de Reservas

• Acesse a página Personalização do Motor de Reservas.
• Adicione o seguinte código no campo JavaScript da seção de Personalização do seu Motor de Reservas.
• No código abaixo, cole o endereço da imagem que foi copiado anteriormente na fonte da imagem (img src) como mostrado abaixo (Substituindo o Adicione o endereço da imagem copiada aqui texto)

<script>
// Quando o Motor de Reservas estiver pronto
window.addEventListener("on-booking-engine-ready", ({ detail }) => {
const { eventSystem } = detail;
// Ouvir o evento property-map-loaded
eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
// ocultar o mapa atual
map.style.display = 'none';
// // Exemplo de inclusão de uma imagem estática
map.insertAdjacentHTML('afterend', `<img src="Adicione o endereço da imagem copiada aqui" alt="Mapa da Propriedade" style="width:100%; height:auto; display:block;">`);
}, false);
});
</script>

O Motor de Reservas exibe o mapa que obtém informações sobre a localização da sua propriedade das configurações do sistema. Para substituir este mapa padrão pelo Google Maps, siga as instruções abaixo.

Passo 1 - Copie o código de localização do Google Maps

1. Abra Google Maps;
2. Encontre a localização da sua propriedade;
3. Clique em Compartilhar;

4. Clique em Incorporar um mapa;
5. Clique em Copiar HTML (isso copiará todo o código). O código deve começar com <iframe e terminar com /iframe>.

Exemplo: O código abaixo destacado em vermelho é o idioma do mapa, inglês (en). Se necessário, você pode alterá-lo para outros idiomas (p. ex., espanhol (es), português (pt), etc.).

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Passo 2 - Insera o código de personalização

• Copie o código abaixo e insira-o na página de Personalização do Motor de Reservas, no campo JavaScript :
• Substitua o texto "Adicione o código copiado do Google Maps" aqui pelo código que você obteve do Google Maps.
  • Importante: Mantenha-o entre aspas "".Resultado esperado: "<iframe src=></iframe>";
• Certifique-se de que o campowidthesteja configurado para 100%. O campo Height geralmente é configurado para 45, mas você pode aumentá-lo para mostrar um mapa maior.
• Salve suas alterações:

<!-- **INÍCIO** Substituir mapa leaflet pelo Google Maps **INÍCIO** -->
<script>
// Quando o Motor de Reservas estiver pronto
window.addEventListener("on-booking-engine-ready", ({ detail }) => {
const { eventSystem } = detail;

// Ouvir o evento property-map-loaded
eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

// ocultar o mapa atual
map.style.display = 'none';

// // Exemplo de inclusão do Google Maps
map.insertAdjacentHTML('afterend', "Adicione o código copiado do Google Maps aqui");

}, false);
});
</script>
<!-- **FIM** Substituir mapa leaflet pelo Google Maps **FIM** -->