How to replace the Google map on mybookings with a static image

Follow

Mybookings 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 and have a static image, follow the steps below.

This option requires the Cloudbeds Plus plan or higher/equivalent

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

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.

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

Go to http://imgbb.com/

  1. Click to upload and select the image from your device
  2. Select the option 'Don't autodelete'
  3. Click 'Upload'

4.    Select the option 'Viewers links'

5.    Copy the link of your image

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 the 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
<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:

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Have more questions? Contact Support

Comments

Powered by Zendesk