CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
DERNERSERFT
DERNERSERFT

Reputation: 110

Setting Google Maps Height to Image Height

On each page, I have a banner at the top. The banners are 1980px by 657px.

HTML:

    <div class="services banner">
        <img src="images/services/banner.jpg">
    </div>

CSS:

    .banner {
        width: 100%;
    }

    .banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

So the height is dependent on the image and viewport size.

On my contact page, I want to have a Google Map instead of a banner. My issue is that I want it to be the same height as the banners. I was hoping I could just put a transparent banner inside of the #map div, but any classes or contents added to #map div disappear.

Any ideas how to achieve this with CSS or JS?

Using Empi's answer, I came up with the following solution:

HTML:

    <div class="contact banner">
        <img id="dummy" src="images/contact/banner.jpg" style="display: none;">
    </div>
    <div id="googlemap">
        <div id="map"></div>
    </div>

CSS:

    #googlemap {
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
        background: #001f37;
        margin: 0 auto;
    }

JS:

$(window).load(function(){
    var imgHeight = $('#dummy').height();
    $('#googlemap').height(imgHeight);
});

$(window).resize(function(){
    var imgHeight = $('#dummy').height();
    $('#googlemap').height(imgHeight);
});

It's a bit hacky, but it works.

Upvotes: 0

Views: 1139

Answers (3)

Empi
Empi

Reputation: 104

You mean something like this?

Get width / height in jQuery. Apply it to the maps. Display: none on the image. A bit a dirty answer but it does the trick. I don't know how you would do it in pure css.


HTML

<div id="con">
<img id="img" src="http://dummyimage.com/600x200/000/fff.jpg" />
<iframe id="maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d76608.9275331472!2d23.1560658!3d53.127625249999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ffc048f41971d%3A0x72317dcc8bf07b2c!2sBia%C5%82ystok!5e0!3m2!1snl!2spl!4v1397752663976"></iframe>
</div>

CSS

#con {
  height: auto;
  width: auto;
  background-color: gray;
}

#img {
  display: none;
}

#maps {    
  margin: 0;
  padding: 0;
  display: block;
  border: none;
}

jQuery

var imgWidth = $('#img').width();
var imgHeight = $('#img').height();

$('#maps').width(imgWidth);
$('#maps').height(imgHeight);

Upvotes: 1

Alex Baulch
Alex Baulch

Reputation: 751

I am fairly certain that when you use tell Google Maps which div to append to, it removes all content from that div. In this case that probably includes your image.

Upvotes: 0

Roy Prins
Roy Prins

Reputation: 3080

Why would you not just set the height of the #map div to auto, just as you do with your banner?

Is there some reason you could not do this?

Upvotes: 0

Related Questions