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

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

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をホームページに埋め込む

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?