Replace mybookings map with Google Maps

Follow

Mybookings 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 please follow the instructions below.

This option requires the Cloudbeds Plus plan or higher/equivalent.

Step 1. Copy location code from Google Maps

Instructions are taken from Google Maps Help: https://support.google.com/maps/answer/144361

Note: 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 into mybookings

1. If you want to replace mybookings 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, section "Custom Meta Tags":

<style>
#map_canvas { display: 
none; 
}
</style>

2. Now you can insert the code taken from Google Maps (step 1) which will embed Google Maps inside maps block in mybookings.

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>

3. 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!

4. The final result should look like this:

If you have mygroups booking engine

If you are using mygroups booking engine you have an extra step to follow. Note that the link for mybookings from Association 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 mygroup 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