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

google map

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

こんな感じ!

地図を用意する

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>

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください