サーバーでサイトをあげたあと、googlemapの高さが維持できない

前提

サーバーでサイトをあげた後、googlemapのみが高さを維持できずに小さくなってしまった。

実現したいこと

コピーライトの位置まで高さを出したい。
レスポンシブ対応でiframeタグ内のwidthとheight指定を削除してます。レスポンシブ対応をしつつ、高さを維持したい。

該当のソースコード

HTML
1
2    <!-- フッター --------------->
3    <footer>
4        <div class="imformation">
5            <div class="imformation-sub">
6                <h1><img class="footer-logo " src="img/group1.png" alt="石井総合内科クリニック"></h1>
7               
8                <div class="adress">
9                        <a class="footer-adress-number">〒000-0000</a>
10                        <a class="footer-adress-wrapper">山形県山形市七日町xxxxxx</a>
11                </div><!-- ./adress -->
12
13              <div class="nav">
14                <div class="nav-tel-header">
15                    <a class="tel-number footer-tel-number" href="tel:00000000000">000-0000-0000</a>
16                </div><!-- /.nav-tel-header -->
17              </div><!-- /.nav -->
18                
19    
20                <table>
21                    <tr>
22                        <td class="open first">診療時間</td>
23                        <td class="week first"><span>月・火</span></td>
24                        <td class="time-am first">午前 8:30~12:30</td>
25                        <td class="time-pm first">午後 15:00~18:30</td>
26                    </tr>
27    
28                    <tr>
29                        <td class="open second"></td>
30                        <td class="week second"><span>木・金</span></td>
31                        <td class="time-am second">午前 8:30~12:30</td>
32                        <td class="time-pm second">午後 15:30~19:00</td>
33                    </tr>
34    
35                    <tr>
36                        <td class="open second"></td>
37                        <td class="week second"><span>土・水</span></td>
38                        <td class="time-am second">午前 8:30~12:30</td>
39                        <td class="time-pm second">午後 14:00~18:00</td>
40                    </tr>
41    
42                    <tr>
43                        <td class="close">休診日</td>
44                        <td class="holiday">日曜・祝日</td>
45                    </tr>
46                </table>
47    
48            </div><!-- ./imformation-sub -->
49            
50            <div class="footer-wrapper">
51                <p>&copy;ISHII SOUGOU NAIKA CLINIC, All Rights Reserved.</p>
52            </div>
53        </div> <!-- ./imformation -->
54
55        <div id="map">
56            <div class="location-map">
57                <iframe
58                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6266.375023550152!2d140.33714384810753!3d38.251956918302426!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8bb603d4436fcd%3A0xa50e3433978fc243!2z44CSOTkwLTAwNDIg5bGx5b2i55yM5bGx5b2i5biC5LiD5pel55S6!5e0!3m2!1sja!2sjp!4v1664540309856!5m2!1sja!2sjp"
59                 style="border:0;" allowfullscreen="" loading="lazy"
60                    referrerpolicy="no-referrer-when-downgrade"></iframe>
61            </div><!-- ./ location-map-->
62        </div><!-- ./map-->
63
64        
65    </footer>
66

css
1@charset "UTF-8";
2
3/* 共通部分 
4----------------------------------*/
5html {
6    font-size: 100%;
7}
8
9body {
10    font-family: 'Noto Sans JP', sans-serif;
11    line-height: 24px;
12    color: #444444;
13}
14
15a {
16    text-decoration: none;
17}
18
19img {
20    max-width: 100%;
21}
22.nav-tel-header {
23    position: relative;
24}
25.nav .tel-number:before {
26    content:"";
27    display: block;
28    width: 24.36px;
29    height: 24.57px;
30    background: url(img/受話器の線画アイコン.svg) no-repeat;
31    background-size: contain;
32    position: absolute;
33    top: 50%;
34    transform: translate(0,-50%);
35    line-height: 24px;
36}
37
38
39.tel-number {
40    color: #21A937;
41    list-style-type: none;
42    font-size: 24px;
43    font-weight: bold;
44    line-height: 24.57px;
45    
46}
47
48/* フッター
49----------------------------------*/
50footer {
51    max-width: 1180px;
52    display: flex;
53    justify-content: center;
54    margin: 0 auto;
55    gap: 34px;
56
57}
58
59.imformation {
60    width: 50%;
61    order: 2;
62    padding-top: 196px;
63}
64
65
66
67.adress {
68    font-size: 16px;
69    margin-top: 25px;
70    margin-bottom: 25px;
71    font-style: normal;
72    font-family: Noto Sans JP;
73    line-height: 38px;
74    font-weight: normal;
75}
76.footer-adress-number {
77    margin-right: 16px;
78}
79.nav .footer-tel-number:before {  
80    left: 0;
81}
82.footer-tel-number {
83    padding-left: 29.5px;
84}
85
86#map {
87    width: 50%;
88    height: auto;
89    order: 1;
90    padding-top: 196px;
91    padding-bottom: 163px;
92}
93
94iframe {
95    width: 100%;
96    aspect-ratio: 12/9;
97
98}
99
100.footer-wrapper {
101    text-align: right;
102    font-size: 11px;
103    margin-bottom: 173px;
104    line-height: 38px;
105
106}
107
108
109
110/* 診療時間 */
111table {
112    font-size: 14px;
113    text-align: left;
114    margin-top: 28.5px;
115    border-top: 2px solid #E7E7E7;
116    border-bottom: 2px solid #E7E7E7;
117    font-weight: normal;
118}
119
120.week {
121    margin-right: auto;
122    margin-left: auto;
123    width: fit-content;
124
125}
126
127.week span {
128    background: linear-gradient(transparent 70%, #99E5A5 80%);
129}
130
131
132.open {
133    padding-right: 57px;
134
135}
136
137.close {
138    padding-right: 57px;
139}
140
141.close,
142.holiday {
143    padding-bottom: 23.5px;
144    padding-top: 31px;
145}
146
147.first {
148    padding-top: 21.5px;
149}
150
151.second {
152    padding-top: 13px;
153}
154
155.time-pm {
156    padding-left: 17px;
157    padding-right: 128px;
158}
159
160
161.open,
162.close {
163    position: relative;
164}
165
166.open::after,
167.close::after {
168    content: "";
169    position: absolute;
170    right: 20px;
171    border-right: 2px solid #E7E7E7;
172}
173
174.open::after {
175    top: 5px;
176    bottom: -8px;
177}
178
179.close::after {
180    top: 29px;
181    bottom: 15px;
182}
183.open.first::after {
184    top: 20px; 
185}
186
187
188
189/* モバイル版
190----------------------------------*/
191
192@media (max-width: 1140px) {
193    
194
195    /* フッター*/
196
197
198    table {
199        font-size: 14px;
200    }
201
202    .time-pm {
203        padding-right: 5px;
204    }
205
206    .footer-wrapper {
207        padding-right: 40px;
208    }
209
210}
211
212@media (max-width: 860px) {
213    
214    /* フッター*/
215    footer {
216        display: flex;
217        flex-direction: column;
218        justify-content: center;
219        text-align: center;
220    }
221    #map {
222        margin-top: 23px;
223        margin-bottom: 0;
224        width: 90%;
225        height: 100%;
226        padding-top: 0;
227        padding-bottom: 0;
228        margin: 0 auto;
229        order: 2;
230    }
231
232    .imformation {
233        display: contents;
234    }
235
236    .imformation-sub {
237        order: 1;
238    }
239
240    .footer-logo {
241        padding-top: 50px;
242        margin-bottom: 20px;
243    }
244   
245   
246    .nav-tel-header {
247        margin: 10px 0;
248        display: inline;
249    }
250
251    table {
252        margin: 0 auto;
253        margin-top: 15px;
254    }
255
256    table {
257        font-size: 12px;
258    }
259
260    .time-pm {
261        padding-left: 17px;
262        padding-right: 0;
263    }
264
265    .footer-wrapper {
266        order: 3;
267        margin-bottom: 23px;
268        padding-right: 0px;
269        text-align: center;
270    }
271
272    .open,
273    .close {
274        padding-right: 30px;
275    }
276}

試したこと

ネットで調べてみたが、レスポンシブを対応させながらの
高さを維持する方法がわからなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2022/10/24 08:15

ブラウザ開発ツールのコンソールにエラーや警告は出ていませんか？あとMap部分の高さに何が影響しているか確認してみてください。また、iframeではなくJavaScriptでGooglemapをセットした場合はどうでしょう。

spn

2022/10/24 11:21

コメントありがとうございます。エラーは出ていないようです。 Javaはまだ勉強前で使えないので、iframeだけで解決したいです。

m.ts10806

2022/10/24 20:06 編集

iframeよりはレイアウト操作がしやすくなるはずなのですが、方針がそれなら仕方ないですね。ただ、JavaとJavaScriptは別物なのでそこは間違えのないよう・・。ローカルとWebサーバで同じソースで同じブラウザで結果が違うとなるとキャッシュなどが疑われます。もしかしたらネットワーク関係の警告が出てないかなと懸念しての確認でした。

spn

2022/10/25 06:23

JavaとJavaScriptは別物なんですね。ありがとうございました。

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

回答1件

ベストアンサー

PC画面時の、CSSを以下の通り修正すれば意図通りの見た目になると思います。
ただしスマホの時に地図がぺったんこになってしまいますので、PCで削除したaspect-ratioを、メディアクエリの中に書き足してやったらいいと思います！

css
1/* 追加 */
2.location-map {
3  height: 100%;
4}
5
6iframe {
7  width: 100%;
8  /* aspect-ratio: 12/9; */
9  height: 100%;
10}
11
12/* 中略 */
13
14@media (max-width: 860px) {
15
16  /* 中略 */
17
18  /* 追加 */
19  iframe {
20    aspect-ratio: 12/9;
21  }
22
23  /* 中略 */
24
25}

投稿2022/10/24 08:15

編集2022/10/24 08:19

Cocode

総合スコア2314

spn

2022/10/24 11:04

コメントありがとうございます。 iPhoneの表示はうまくいったのですが、PCで見るとどうしても潰れてしまっているようです。

Cocode

2022/10/24 19:11 編集

これで解決するかわからないのですが、iframeタグにwidthとheight属性を書き足してみるのはどうでしょう？ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6266.375023550152!2d140.33714384810753!3d38.251956918302426!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8bb603d4436fcd%3A0xa50e3433978fc243!2z44CSOTkwLTAwNDIg5bGx5b2i55yM5bGx5b2i5biC5LiD5pel55S6!5e0!3m2!1sja!2sjp!4v1664540309856!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" width="100%" height="100%"></iframe>

Cocode

2022/10/24 19:12

それから、サーバーにアップロードして確認する際には、キャッシュをクリアしてリロードしていますか？普通にリロードしただけだと、前のCSSの情報が残っていて、新しいCSSが適用されません。

spn

2022/10/25 10:56

コピペして貼り付けさせていただきました。縮小したときは高さを維持できるようになったのですが、 width: 860px以上で高さが潰れてしまうようです。 iframeで600✖︎400で設定し直しても同様に潰れてしまいました。

spn

2022/10/27 08:00

何回も丁寧に教えていただいたCocodeさんに感謝いたします。ありがとうございました。キャッシュをクリアにしてリロードするとできました。 Google Chrome　(Mac） Shift + 更新ボタン Cmd + Shift + R Google clomeでは正しく反映されるのですが、 Safariでは違うように反映されたり難しかったです。寄り添った対応をしていただき、ありがとうございます。遅くなりましたがお礼を申し上げます。

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