This article explains how to replace or hide your property map in the Booking Engine.
Replace the Booking Engine Map
Static image can be a picture of direction on how to reach to your property.
Before starting, make sure that the Hide Map option is not enabled in your Booking Engine Settings.
Step 1 - Upload the new image online
Make sure that the desired image is saved on your device before proceeding with the following steps.
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.
- Go to http://imgbb.com/, and click Start Uploading to select the image from your device
- Select the option Don't autodelete
- Click Upload
- Select the option Viewers links in the Embed Codes section
- Copy the link of your image. You will need this link later, for the following Step 3
Step 2 - Copy the Image Address
- Open an incognito window on your browser
- Paste the picture link from Step 2 on this incognito window
- Right-click and copy image address
Step 3 - Add the image on your Booking Engine
- Access the Customize Booking Engine page
- Add the following code under the Custom footer for your hotel booking page section
- In 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.
![[Demo] Mountain Resort & SPA - Customize mybookings - Google Chrome](https://media.screensteps.com/image_assets/assets/004/903/359/original/6703c814-68fb-4af7-a276-044d1fdbfa22.png)
This is how it will look like:
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.
- Open Google Maps
- Find your property location
- Click Share
- Click Embed a map
- Click Copy HTML (this will copy the entire code). The code should start with
<iframeand 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
- 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>
- Copy the code below and insert it into Custom footer for your hotel booking page section of the Customize Booking Engine page.
-
Replace the text highlighted red with the code you got on Google Maps. Make sure that the
widthis set to 100%.Heightis 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>- Duplicate the code for all the languages:
- Save your changes:
- The final result should look like this, displaying your Google Maps location:
![[Demo] Bali Wild Jungle Resort - ottawa, Canada - Best Price Guarantee](https://media.screensteps.com/image_assets/assets/004/687/430/original/2a72ca8b-ed91-4378-b083-f0b3b3a2a3ed.png)
If you are using the Groups 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.
Follow the steps below:
- Login to your Groups account and click on your username
- Select Settings
- Click Customize Booking Engine
- 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>Learn more about Groups Booking Engine - How to Customize
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).
- Click on the Account icon
- Go to Settings
- Go to the Booking Engine Settings
- Click on the Hide Map check-mark to enable the option
- Save your changes
Comments
Please sign in to leave a comment.