Booking Engine Plus – Oculta o sustituye el mapa de tu hotel

Una imagen estática puede ser una imagen con indicaciones sobre cómo llegar a tu propiedad.

Paso 1: Cargar la nueva imagen en línea

Para que la imagen se muestre en lugar del mapa, debe cargarse o guardarse en internet usando algún sitio de alojamiento de imágenes.

1. Ve a http://imgbb.com/, y haz clic en el botón para iniciar la carga de la imagen desde tu dispositivo.
2. Elige la opción para no borrar automáticamente la imagen.
3. Haz clic en el botón para subir la imagen.

4. En la sección de códigos para insertar, selecciona la opción de enlaces para visualización.
5. Copia el enlace de tu imagen (lo necesitarás más adelante, en los siguientes pasos).

Paso 2: Copiar la dirección de la imagen

1. Abre una ventana de incógnito en tu navegador.
2. Pega el enlace de la imagen (copiado en el paso anterior) en esta ventana de incógnito.
3. Haz clic derecho sobre la imagen y copia la dirección de la imagen.

Paso 3: Añadir la imagen a tu Booking Engine

• Accede a la página Customize Booking Engine.
• Añade el siguiente código en el campo JavaScript de la sección Customize de tu Booking Engine.
• En el código de abajo, pega la dirección de la imagen que copiaste previamente en el atributo de origen de la imagen (img src), como se muestra a continuación (reemplazando el texto Añade aquí la dirección de la imagen copiada).

<script>
  // Cuando el Booking Engine esté listo
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // Escuchar el evento property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // Ocultar el mapa actual
      map.style.display = 'none';
      // Ejemplo de inclusión de una imagen estática
      map.insertAdjacentHTML('afterend', `<img src="Añade aquí la dirección de la imagen copiada" alt="Mapa de la propiedad" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

El Booking Engine muestra un mapa que obtiene la información de la ubicación de tu propiedad desde la configuración del sistema. Para reemplazar este mapa predeterminado con Google Maps, sigue las instrucciones a continuación.

Paso 1: Copiar el código de la ubicación desde Google Maps

1. Abre Google Maps.
2. Busca la ubicación de tu propiedad.
3. Haz clic en Compartir.

4. Haz clic en Insertar un mapa.
5. Haz clic en Copiar HTML (esto copiará todo el código). El código debería comenzar con <iframe y terminar con /iframe>.

Ejemplo: El código resaltado en rojo a continuación corresponde al idioma del mapa, inglés (en). Si es necesario, puedes cambiarlo a otros idiomas (por ejemplo, español (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>

Paso 2: Insertar el código de personalización

• Copia el siguiente código e insértalo en la página Customize Booking Engine, en el campo JavaScript:
• Reemplaza el texto "Añade aquí el código copiado desde Google Maps" con el código que obtuviste de Google Maps.
  • Importante: mantenlo dentro de comillas dobles "".Resultado esperado: "<iframe src=></iframe>";
• Asegúrate de que el valor de width esté configurado en 100%. El valor de height suele estar configurado en 45, pero puedes aumentarlo para mostrar un mapa más alto.
• Guarda tus cambios.

<!-- **INICIO**  Reemplazar el mapa Leaflet con Google Maps **INICIO** -->
<script>
  // Cuando el Booking Engine esté listo
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // Escuchar el evento property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // Ocultar el mapa actual
      map.style.display = 'none';

      // Ejemplo de inclusión de Google Maps
      map.insertAdjacentHTML('afterend', "Añade aquí el código copiado desde Google Maps");

    }, false);
  });
</script>
<!-- **FIN**  Reemplazar el mapa Leaflet con Google Maps **FIN** -->