Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

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

google map

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

こんな感じ!

INDEX

地図を用意する

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

Googleマップ

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

コードを入手する

[共有]のページが開いたら、[地図を埋め込む]をクリック。そして、をクリックし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>
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX