iframeにgoogleマップを埋め込む際、カスタムサイズ指定が反映されない

前提・実現したいこと

【画面幅１０２４px以上時において。】
webページへgoogle mapを埋め込む際、
1 . google mapのサイズは幅８００px 高さ４００pxで固定としたい。
2 . 左右中央配置
3 . 縦横比は維持

発生している問題

google mapの共有機能からiframeタグをコピーする際、
カスタムサイズ指定で８００×４００とした上で
HTMLに貼り付けをしても８００×４００の指定が反映されず、
横幅いっぱいに表示されてしまう。
横幅いっぱいとは、後述の<div class="inner">の幅いっぱいという意味です。

該当のソースコード

HTML
1
2<section class="access">
3<div class="inner">
4    
5<h2 class="h2">Access</h2>
6<hr class="under-index">
7
8<div class="iframe_wrap">
9  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6482.029210910684!2d139.70956383004864!3d35.67664236152136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188caf7d44115f%3A0xb244aa5619a8e264!2z5paw5Zu956uL56u25oqA5aC0!5e0!3m2!1sja!2sjp!4v1573136308659!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
10</div>
11
12<div class="g-map">
13<a href="https://" target="_blank" rel="noopener noreferrer" class="map-btn">GoogleMap</a>
14</div>
15
16</div><!--.inner-->
17</section>
18

CSS
1
2      /*google mapがこのinner幅いっぱい（1086px）に広がってしまいます*/
3     .inner{
4       margin: 0 auto;
5       width: 1106px;
6       max-width: 100%;
7       padding: 0 10px;
8     }
9
10    .iframe_wrap{
11       position: relative;
12       padding-top: 50%;
13       height: 0px;
14       width: 100%;
15       overflow: hidden;
16       margin: 0 auto 40px;
17　　　}
18
19     iframe{
20       position: absolute;
21       top: 0%;
22       left: 0%;
23       width: 100%;
24       height: 100%;
25     }
26   
27

試したこと

    .iframe_wrap{
       position: relative;
       padding-top: 50%;
       height: 0px;
       width: 100%;
       overflow: hidden;
       margin: 0 auto 40px;
　　　}

のwidth、

　　　 iframe{
       position: absolute;
       top: 0%;
       left: 0%;
       width: 100%;
       height: 100%;
     }

のwidthやheightを変えると縦横比が維持できなくなったり、
中央配置が崩れてしまいました。

原因がお分かりになる方、
ご教示頂けましたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

.iframe_wrap に width: 100%;を指定しているから当然そうなります。
width: 100%;を削除してmax-width: 800px;を追加するか、.iframe_wrap の外側にmax-width: 800px;の要素を追加するかどちらかだと思います。

投稿2019/11/07 18:13