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.

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. In the top left, click Menu.
  4. Click Share or embed map.
  5. Click Embed map.
  6. Copy the text in the box or keep this page open; you will need to copy the code according to the instructions below.

The code should start with <iframe and end with /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