Booking Engine Plus - Hide or Replace your Property Map

A static image can be a picture of directions on how to reach your property.

Step 1 - Upload the new image online

To have the image being displayed instead of the map, it needs to be uploaded or saved on the internet in one of the image hosting websites.

1. Go to http://imgbb.com/, and click Start Uploading to select the image from your device
2. Select the option Don't autodelete
3. Click Upload

4. Select the option Viewers' links in the Embed Codes section
5. Copy the link of your image (You will need this link later, for the following steps)

Step 2 - Copy the Image Address

1. Open an incognito window on your browser
2. Paste the image link (copied from the previous step) in this incognito window
3. Right-click and copy the image address

Step 3 - Add the image to your Booking Engine

• Access the Customize Booking Engine page
• Add the following code under the JavaScript field of your Booking Engine Customize section
• In the code below, paste the image address that was previously copied in the image source (img src) as shown below (Replacing the Add the copied image address here text)

<script>
  // On Booking Engine Ready
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // Listen for the property-map-loaded event
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // hide the current map
      map.style.display = 'none';
      // // Example of including a static image
      map.insertAdjacentHTML('afterend', `<img src="Add the copied image address here" alt="Property Map" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

Booking Engine displays the map which pulls information about your property location from the system settings. To replace this default map with Google Maps, follow the instructions below.

Step 1 - Copy location code from Google Maps

1. Open Google Maps
2. Find your property location
3. Click Share 

4. Click Embed a map
5. Click Copy HTML (this will copy the entire code). The code should start with <iframe and end with /iframe>

Example: The code highlighted red below is the language of the map, English (en). If necessary you can change it to other languages (e.g Spanish (es), Portuguese (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>

Step 2 - Insert customization code

• Copy the code below and insert it into the Customize Booking Engine page, in the JavaScript field:
• Replace the text "Add the copied code from Google Maps" here with the code you got from Google Maps.
  • Important: Keep it wrapped within quotation marks "".Expected result: "<iframe src=></iframe>";
• Make sure that the width is set to 100%. Height is usually set to 45, but you can increase it to show a longer map.
• Save your changes:

<!-- **START**  Replace leaflet map with Google Maps **START** -->
<script>
  // On Booking Engine Ready
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // Listen for the property-map-loaded event
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // hide the current map
      map.style.display = 'none';

      // // Example of include Google Maps
      map.insertAdjacentHTML('afterend', "Add the copied code from Google Maps here");

    }, false);
  });
</script>
<!-- **END**  Replace leaflet map with Google Maps **END** -->