Я пытаюсь добавить Google Map в свой дизайн, который должен быть адаптивным. Я'мы использовали тот же код, который работает для изображений ... Но по какой-то причине картаs iframe изменяет размеры с размерами, которые я не сделалвыбрать

HTML

    ​

и CSS

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}

Или вы можете посмотреть его вживую и поиграть с ним здесь:http://jsfiddle.net/corinne/pKUzU/ (если вы отключите CSS, вы поймете, что я имею в виду).

Мой вопрос заключается в том, как сделать так, чтобы этот iframe / map реагировал без потери требуемой высоты?