ストリートビューをスマホ向けのレスポンシブWebデザインにする

スマホでストリートビューを画面サイズにする

スマホにストリートビューを表示すると画面からはみ出してしまい操作性がかなり悪くなります。
iPhoneユーザなどはとてもストリートビューを使えるものではありません。

そこでデバイスごとに画面を合わせる"レスポンシブWebデザイン"にする必要がありますがデフォルトでは対応していません。
色々苦労して実現した結果をメモとして記録していきます。

失敗例

以下設定してもストリートビューは画面に収まりませんでした。イメージではないので当然でしょう。

img {
max-width: 100%;
height: auto;
}

以下設定してもストリートビューは画面に収まりませんでした。他の方法が必要なようです。

成功例

以下の方法で成功しました。詳細はリンクを参考にしてください。

<div class="ggmap">ストリートビューから取得したiframeのコード</div>

.ggmap {
＜省略＞}

＜省略＞に関しては以下コードを参照してください。

参考：【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
https://inthecom.net/718

キーワード：レスポンシブWebデザイン

Windows トラブルシューティング一覧に戻る

（ご注意事項)本ページは2017年に独自に調査して記載した事項です。本ページには誤りがある可能性はあります。また今後仕様が変更となる可能性があります。
本ページにより発生したいかなる損失も誰も補償しません。あくまでも自己責任で参考にしてください。