ページに埋め込んだGoogleMapをレスポンシブ対応させる方法

html

<div class="gmap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8255202704836!2d139.76405821495072!3d35.68129798019423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1463330797168" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

css

.gmap{
  width: 80%;
  margin: 0 auto;
  padding: 30px 0 56.25%;
  position: relative;
  overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

なお、スマホなどでGoogleMap上のスクロールを無効にしたい場合はiframeの記述の中にstyle="pointer-events:none;"を追加する。