Googleマップをレスポンシブでサイトに組み込むHTML【コピペ専用】

開発日記

こんにちわ。 イチハチです。
Googleマップをレスポンシブで自社サイトに組み込む方法のコピペ専用ページです。

慣れれば1分で出来る内容です。

スポンサーリンク

手順1 HTMLとCSSをコピペして貼り付け

早速手順に進めたいと思います。

デモページ

HTML

<div class="map">
<!-- ↓↓ この間のGoogleマップコードを書き換える ↓↓-->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26587.962611151397!2d130.40444191984867!3d33.59245038191382!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354191c7e6f9b375%3A0x2ee22b3d45b98b90!2z5Y2a5aSa6aeF!5e0!3m2!1sja!2sjp!4v1548119539749" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- ↑↑ この間のGoogleマップコードを書き換える ↑↑ -->
</div>

こちらをHTMLソース内にコピペしてください。

CSS

.map{
width: 100%;
max-width: 100%;
}
.map iframe{
width: 100%;
}

次に、CSSをコピペしてください。 外部CSSに貼り付けた方が良いです。

手順2 Googleマップから欲しい住所のコードを取得

こちらのGIF動画を参考にしてGoogleマップ用のHTMLコードを取得してください。

以上で、レスポンシブでGoogleマップへの貼付けが完了しました。

まとめ

いかがでしたでしょうか?

想像以上に早く導入出来たかと思います。

このように問題なくレスポンシブになっていますね。

こちらのデモページでも確認いただけます。

デモページ

 

それではまた。

 

コメント