google mapをウィンドウにあわせて可変できるようにhtmlに埋め込む

google ホームページ制作

Googleマップの埋め込みコードをちょっと変えるだけで、ウェブブラウザ幅に合わせて表示幅が変わるマップ表示の方法です。

googleマップから生成されるコードをそのまま表示しては、自分のホームページやブログのサイズに合わず、残念な結果になってしまいます。
また、ウィンドウ幅によってかわるホームページを作っている場合、google map も自動的に可変にしたいものです。



埋め込みコード生成

Google マップにアクセスし、埋め込みたい地図の情報を入力し、メニューボタンをクリックします。

google mapをホームページに埋め込む

表示されたメニューの中から、『地図を共有または埋め込む』をクリックします。

google mapをホームページに埋め込む

 

htmlコードを一工夫

google mapをホームページに埋め込む

コードをコピーすると、

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3279.7917566836277!2d137.74066389999996!3d34.710432000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ade724f4eb1c3%3A0x7b1e403543675a2!2z44CSNDMwLTA5Mjkg6Z2Z5bKh55yM5rWc5p2-5biC5Lit5Yy65Lit5aSu77yS5LiB55uu77yU4oiS77yS77yS!5e0!3m2!1sja!2sjp!4v1440557904204″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

この用なコードが取得出来ます。

width=”600″

この 600 の部分を、100%に変更します。

width=”100%”

ちなみに高さを変更したい場合には、

height=”450″

の 450 の部分を変更すると、高さを変更する事ができます。
単位は ピクセル です。

 

表示させたい場所に張り付け!

変更ができたら、htmlコードを、自分のホームページの表示させたい箇所に貼付ければ完了です!

google mapをホームページに埋め込む