How to replace the Google map on the Booking Engine

Follow

Cloudbeds Booking engine has live maps that allow the guests to reach your property by following the directions in it. In order to replace the map, check the following options below.

If you would like to request an upgrade to your current plan, contact our Hospitality Consultants

Replace with a static image

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

Step 1 -Remove the current map in the Booking Engine

To remove the map from the Booking Engine, add the following code under the Custom Meta Tags section:

  1. Click on Manage
  2. Access Customize Mybookings section
  3. Copy and paste the code below under the Custom Meta Tags section
<style>
#map_canvas {
visibility: hidden;
display: none;
}
</style>

Step 2 - Replace the map with a new image

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/, then 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 grab its image link
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 Customize Mybookings 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.

If you want 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. If you want to replace booking engine default map with Google Maps, you need to hide the default map first.

You can do this by inserting the code below on Mybookings Customization page, in both sections: Custom Meta Tags and in Custom Meta Tags (Confirmation Page Only):

<style>
#map_canvas { display: 
none; 
}
</style>
  1. Insert the code taken from Google Maps (step 1) which will embed Google Maps inside maps block in the booking engine

Replace the code highlighted red below 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. Copy the whole code and insert it into Custom footer for your hotel booking page section on Mybookings Customization page.

Duplicate the code for all the languages

  1. The final result should look like this:
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:

Login to your mygroups account:

  1. Click on your username in the upper-right hand corner
  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>
Powered by Zendesk