Google Maps weird height problem

Suddenly our maps stopped working. well they work, but with weird height. Nothing has changed on our side so it seems Google changed something which influenced all the websites that run our software. Take a look at the map at this URL:

http://www.cubescripts.com/real-estate-script/property/renovated-beach-house-36345.html

I tried some weird height hacks, but it does not seem as elegant solution especially when it comes to responsiveness. Thanks!

This is what you have right now

<div class="mt-map propmap" id="sideMap">
  <div style="height: 100%; width: 100%; position: relative; overflow: hidden; background-color: rgb(229, 227, 223);">
</div>

with the styling:

.rooms.single .map-tags .mt-map {
    width: 71.4%;
    padding-bottom: 41.6%;
    height: 0;
}

The div inside the .mt-map can’t get the height 100%, because it is positioned relative, and not absolute.
No idea if you have control over that part.

2 fixes …
1. put position absolute on the div in the mt-map, and add position:relative to .mt-map

2.
add a container around .mt-map

<div class="mt-map-wrapper">
  <div class="mt-map propmap" id="sideMap">
    <div style="height: 100%; width: 100%; position: relative; overflow: hidden; background-color: rgb(229, 227, 223);">
  </div>
</div>

Place the styling of mt-map on mt-map-wrapper & absolutely position the .mt-map

.mt-map-container {
    width: 71.4%;
    padding-bottom: 41.6%;
    height: 0;
    overflow:hidden;
    position:relative;
}

 .mt-map {
    width: 100%;
    height: 100%
    left: 0;
    top: 0;
    position: absolute;
}
1 Like

Thanks that did help with some workarounds. I had to add row to:

<div class="map-tags clearfix row">

in order to align positions next to each other and of course columns for each div. After that I had problems with map in responsive view. Managed to fixed it. Maybe not the best solution, but it works for now.

Thanks!

It seems that this was Google Maps problem. They fixed it and now all versions of the software are working nicely. We did find a fix for something that never needed a fix.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.