Cloudbeds Booking Engine - How to Replace or Hide the Booking Engine Map

Follow

Cloudbeds Booking Engine has live maps that allow the guests to reach your property by following the directions in it. To hide or replace your Booking Engine map, check the options below.

To request an upgrade to your current plan, contact our Hospitality Consultants.

Replace the Booking Engine Map

Replace with a static image

Static image can be a picture of direction on how to reach to your property.

Step 1 - Hide/Remove the current map in the Booking Engine

Refer to the Hide Booking Engine Map section below to complete this first step.

Step 2 - Upload the new image online

Before starting, make sure that the desired image is saved on your device.

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
  1. Select the option Viewers links in the Embed Codes section
  2. Copy the link of your image. You will need this link later, for the following Step 3
ImgBB — Upload Image — Free Image Hosting - Google Chrome

Step 3 - Copy the Image Address

  1. Open an incognito window on your browser
  2. Paste the picture link from Step 2 on this incognito window
  3. Left-click and copy image address
Q6kRrQ6jR7O_AKjnIQm2UuMmY-kuaXzdxiGvuuNn-VGmcU8nEZNOW5rakJ8IV0QESeHDgj-uwoZSCgYkekru0lM7nU1Ci7SBpTWj1HQsXAq6-Es4nFk9s_FuELdmDSGyn7PU5Qpo (360×293) - Google Chrome
0qeY2A82Sm3NWJn4HjFzbBKQnwo8n3nuwgH5jB2uu4D2gmzIFJaVEX4riVTw-x98gy_o-bJPON4Kks5B4AHDlPomqUUemF8jRmNapfr099gTS9rATV_JMbr-VePVcRiR6ESj0HKs (674×395) - Google Chrome

Step 4 - Add the image on your Booking Engine

  1. Access the Customize Booking Engine page
  2. Add the following code under the Custom footer for your hotel booking page section
  3. On the code below, paste the image address that was copied in step 3 in the image source (img src) as shown below (Replacing the Add the copied image address here text)
<script type="text/javascript">
window.addEventListener("load", function(event) { 
//append google maps iframe
 var d1 = document.getElementById('map_canvas');
 d1.insertAdjacentHTML('afterend', '<img src="Add the copied image address here" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></img>');
}, false);
</script>
  • The code saved in the Custom footer for your hotel booking page needs to be added (copy & pasted) to all the desired languages for them to be active and working properly.
  • On the left side, switch the language and then copy and paste the same code to the desired languages.

This is how it will look like:

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Replace with Google Maps

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

  • Instructions are taken from Google Maps Help
  • Traffic and other Maps info is sometimes not available in the embedded map.
  1. Open Google Maps
  2. Find your property location
  3. Click Share
  1. Click Embed a map
  2. Click Copy HTML (this will copy the entire code). The code should start with <iframe and end with /iframe>

The code will be generated in the language of your browser and the map will be displayed in that language.

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

  1. Insert the code below in the Customize Booking Engine page, in both sections: Custom Meta Tags and Custom Meta Tags (Confirmation Page Only):
<style>
#map_canvas { display: 
none; 
}
</style>
  1. Copy the code below and insert it into Custom footer for your hotel booking page section of the Customize Booking Engine page.
  2. Replace the text highlighted red with the code you got on Google Maps. Make sure that the width is set to 100%. Height is usually set to 450 but you can increase it to show a longer map.
<script type="text/javascript">
window.addEventListener("load", function(event) {
  //append google maps iframe
  var d1 = document.getElementById('map_canvas');
  d1.insertAdjacentHTML('afterend', '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2572.60377989993!2d24.020110315452538!3d49.849901979396975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473add0bab6b2a0d%3A0x808e8719253e6808!2sForum+Lviv!5e0!3m2!1sru!2sua!4v1547106673131" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');
}, false);
</script>
  1. Duplicate the code for all the languages:
  1. Save your changes:
  1. The final result should look like this, displaying your Google Maps location:
If you have an Organization

If you are using Mygroups Booking Engine you have an extra step 3 to follow after completing the ones above. The link for booking engine from Organization is different, and the codes in individual booking engine do not work if you come to the individual property.

In this case, follow the steps below:

  1. Login to your mygroups account and click on your username
  2. Select Settings
  3. Click Customize Booking Engine
f0c645d0-0824-4cd3-bda4-de717f40ba87.png (855×508) - Google Chrome
  1. Add the following code to the Custom Meta Tags section
<style>
/* Change Search Button */
.btn.btn-warning.btn-block {
color: #000000;
}
.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
color: #000000!important;
color: #000000;
}
#map_canvas { display: 
none; 
}
</style>

Hide the Booking Engine Map

The Hide Map setting will hide all types of maps in the Booking Engine (both Cloudbeds PMS map and Google Maps).

  1. Click on Manage (gear icon)
  2. Go to the Booking Engine Settings
  3. Click to remove the check mark on the Hide Map option
  4. Save the change
Powered by Zendesk