質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3117閲覧

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

KEHISA

総合スコア11

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/07 18:08

前提・実現したいこと

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

発生している問題

google mapの共有機能からiframeタグをコピーする際、
カスタムサイズ指定で800×400とした上で
HTMLに貼り付けをしても800×400の指定が反映されず、
横幅いっぱいに表示されてしまう。
横幅いっぱいとは、後述の<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を変えると縦横比が維持できなくなったり、
中央配置が崩れてしまいました。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2019/11/07 18:13

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KEHISA

2019/11/07 18:54

kei344様 ご回答頂きありがとうございました!後者の方法でうまく行きました! (.iframe_wrapにmax-width: 800px;は、高さが543pxになってしまい、比の維持に失敗しました。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問