ページコンテンツ
WEBサイトにGoogle マップをレスポンシブ対応で埋め込む方法の紹介です。
Google MapsからHTMLをコピー
Googleマップにて、WEBサイトに埋め込みたい住所を検索します。
住所検索後、マップ画面にて共有ボタンをクリックします。
”地図を埋め込む”をクリックして、”HTMLをコピー”をクリックします。
WEBサイトにコードの貼り付け
HTMLの編集
以下を参考にコピーしたHTMLをdivで囲み、WEBサイトの地図を表示する箇所に貼り付けます。
<div class="map">
コピーしたHTML
<div>
CSSの編集
CSSに以下のコードを追加してください。
.map {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
まとめ
GoogleマップからコピーしたHTMLだけだと、レスポンシブ対応にはなっておらず、スマホで見たときに画面が崩れているWEBサイトもあるかと思います。
その際の修正の参考になれば幸いです。
サイト制作からカスタマイズ・障害復旧まで対応
WEBサイト制作から運用・障害復旧まで、ワンストップで提供可能です。
もちろん、障害復旧のみのご依頼もお受けしておりますので、是非お気軽にご相談下さい。
投稿者プロフィール

最新の投稿
ブログ2022.12.30IndexNow Pluginを使ってBingとYandexに自動でindexをつける
ブログ2022.12.30Pochipp(ポチップ)アフィリエイトリンクを管理できる、無料のWordPressプラグイン
ブログ2022.12.30インターネットバンキング ログインURL一覧
お知らせ2022.12.24セールス電話の弊社応対について