レスポンスブデザインでgoogle map

レスポンスブデザインでgoogle mapを設置するには、サイズを柔軟にする必要がありますよね？そして、吹き出しがあるとスマホでは邪魔くさい事になってしまうので、両方解決します。

いろいろなサイトを参考にさせて頂いたので、覚書。
まず、吹き出し問題。

～output=embed"></iframe></div><br /> の=embed"　の所に「&iwloc=B」を付け足して
output=embed&iwloc=B"></iframe>にする。ローカルでは一見失敗しているようですが、アップすれば大丈夫です。

次はサイズを柔軟にします。

<div class="map-container"> ホゲホゲ output=embed&iwloc=B"></iframe></div>ホゲホゲ　とdivで挟みます。

そして、CSSに

.map-container { position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0; overflow: hidden;
}

.map-container iframe, .map-container object, .map-container embed
{ position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
を追記します。