Booking Engine Plus: Show, replace, or hide your property map

Introduction

Booking Engine Plus can display your property's location on a map near the bottom of the booking page, helping guests see where your property is located before making a reservation.

By default, the map uses Leaflet. You can replace it with Google Maps directly from your Booking Engine settings, use a custom static image through JavaScript customization, or hide the map entirely.

The method you choose depends on whether you want an interactive map, a custom visual, or no map on your booking page.

Table of contents

• Choose how to display your property map
• Replace the default map with Google Maps
• Replace the map with a static image
• Hide the property map
• Troubleshoot property map display issues

Choose how to display your property map

The Booking Engine provides different ways to control your property's map. Review the options below to choose the method that best matches the experience you want guests to see.

Replace the default map with Google Maps

To show Google Maps, first copy the property's embed URL from Google Maps, then save it in Cloudbeds PMS. Check the result in your Booking Engine after saving.

Step 1: Get the Google Maps embed URL

Start with the correct property listing in Google Maps:

1. Open Google Maps.
2. Search for your property by name or address and confirm that the correct location is selected.
3. Select Share on the property's Google Maps listing.

The Share control appears with the listing's other actions:

4. In the Share dialog, choose Embed a map instead of copying the standard sharing link.

The embed option is separate from Copy Link:

5. Select Copy HTML to copy the map's embed code.

The copied HTML contains the embed URL needed in the next step:

6. From the copied HTML, copy only the URL inside the src attribute. It must begin with https://www.google.com/maps/embed. Keep this URL for the Booking Engine settings in the next step.

Step 2: Enable Google Maps in Cloudbeds PMS

In Cloudbeds PMS, configure the map provider and save the URL:

1. In Cloudbeds PMS, open the Account Menu and select Settings.
2. Open Booking Engine, then select the Settings tab.
3. Open the Advanced tab.
4. Turn on Display property map. This setting must remain enabled for either map provider to appear.
5. Turn on Use Google Maps for property map to reveal the Google Maps embed URL field.
6. Paste the Google Maps embed URL copied in Step 1 into the field.
7. Click Save.
8. Open your Booking Engine and verify that Google Maps appears in the property map section.

The highlighted controls show the completed configuration before saving:

Compare the map in Property Information > Address and Contact before and after enabling Google Maps:

Before: Leaflet

After: Google Maps

Return to the default map

If you prefer to use Leaflet again, return to Account Menu > Settings > Booking Engine > Settings > Advanced, turn off Use Google Maps for property map, and save your changes.

Keep Display property map enabled so the default Leaflet map remains visible. The saved Google Maps embed URL is retained when the Google Maps option is disabled.

Replace the map with a static image

To show an illustrated map or directions instead of an interactive map, use a publicly accessible image URL with the advanced JavaScript customization option.

Step 1: Host the image online

The Booking Engine needs a publicly accessible image address to display your custom map. Make sure the image is saved on your device before uploading it.

1. Upload your image to an image-hosting service that provides a public image URL.
2. Configure the image so that it remains accessible and is not automatically deleted.
3. Copy the public image link provided by the hosting service.
4. Open the image link in a private or incognito browser window to confirm that it can be viewed without signing in.
5. Open the image itself and copy its direct image address. Keep this URL for the next step.

The direct image URL must load the image itself rather than a page displaying the image. This allows the Booking Engine customization to use the image as its source.

Step 2: Add the image using JavaScript customization

Use the Booking Engine customization area to replace the default map with the hosted image.

1. In Cloudbeds PMS, open the Account Menu and select Settings.
2. Open Booking Engine, then select Customize.
3. Locate the JavaScript customization field.
4. Copy the script below into the field.
5. Replace Add the copied image address here with your direct image URL. Keep the quotation marks around the URL.
6. Save your changes, then open the Hosted Booking Engine and verify that the static image appears in place of the default map.

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

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

Because this is a custom image replacement, it does not provide the interactive navigation, zoom, or directions functionality of Google Maps.

Hide the property map

If you do not want guests to see a location map, you can hide it using the Display property map setting. This setting controls the visibility of the map regardless of whether the default Leaflet map or Google Maps is selected.

1. In Cloudbeds PMS, open the Account Menu and select Settings.
2. Open Booking Engine, then select Settings.
3. Open the Advanced tab.
4. Turn off Display property map.
5. Click Save.
6. Open your Booking Engine and confirm that the property map is no longer displayed.

To show the map again, return to the same setting, enable Display property map, and save your changes.

Troubleshoot property map display issues

If your map does not appear or the Google Maps setting cannot be saved, review the relevant situation below before changing your configuration.

Expand the question that matches what you are seeing.

If the issue continues after these checks, contact Cloudbeds Support and provide the affected property, the map method selected, the relevant URL or configuration, a screenshot of the result, and the troubleshooting steps already attempted.

Related articles

Once your property map is configured, these resources provide additional context about other Booking Engine settings and customization options:

• Booking Engine Settings page overview: Review the available Booking Engine settings, including advanced display options.
• Booking Engine Plus - Most Common Customization Codes: Explore other advanced Booking Engine customization options.