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:

Have more questions? Contact Support

Comments

Powered by Zendesk