Установка высоты Google Maps для высоты изображения

На каждой странице у меня есть баннер наверху. Баннеры - 1980px на 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;
    }

Таким образом, высота зависит от размера изображения и видового экрана.

На моей странице контакта я хочу использовать карту Google вместо баннера. Моя проблема в том, что я хочу, чтобы она была той же высоты, что и баннеры. Я надеялся, что могу просто поместить прозрачный баннер внутри div #map, но все классы или содержимое, добавленные в #map div, исчезнут.

Любые идеи, как достичь этого с помощью CSS или JS?

Используя ответ Empi, я придумал следующее решение:

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);
});

Это немного хаки, но это работает.