Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

Google mapをレスポンシブに対応させる

なにかと使うgoogle Mapですが、レスポンシブサイトに埋め込むと、どうも上手くいきません。
でもレスポンシブに対応させるのは、とっても簡単なんですよ。

こんな感じ!

INDEX

地図を用意する

Google Mapにアクセスします。欲しい地図を表示させます。

Googleマップ

コードを入手したいので、[共有]をクリックします。

コードを入手する

[共有]のページが開いたら、[地図を埋め込む]をクリック。そして、[html]をクリックしiframeで始まるコードをコピーします。

Google map

コードの編集

例は、帝国ホテルの地図です。横幅部分を編集して、width=”100%”にするだけです。これで、レスポンシブサイトにも対応します。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.1898692355167!2d139.7560591152587!3d35.6723265801963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bee5d15bc4f%3A0xc637562b5aac0ea6!2z5bid5Zu944Ob44OG44Or5p2x5Lqs!5e0!3m2!1sja!2sjp!4v1556012500771!5m2!1sja!2sjp" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる