WebサイトにGoogle マップを表示したい。
Google マップの共有を使う

Webサイトに地図を表示したいだけならば、Google マップが提供しているHTMLソースコードをコピペする方法が手っ取り早いです:)。手順と、地図の大きさの調整の仕方をまとめました。

Google マップを埋め込む

まずはPCから、Google マップで、目的地を検索します。検索した時の左のメニューから、「共有」の「地図を埋め込む」で提供されているHTMLをコピーして、WebサイトのHTML内の、地図を配置したい箇所にペーストします。

「共有」の「地図を埋め込む」で「HTMLをコピー」をクリック
  1. <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

表示される地図には、その施設の情報や、Googleでログインしているアカウントのアイコンが表示されていたり、施設の情報ウィンドウ内の「ルート」から直接Google マップのルート案内にリンクできたり、Google マップのほとんどの機能を享受できちゃう内容となっています。

Google マップの埋め込み

ただし、コピペしたままだと、地図のサイズが固定されてるので、表示したいエリアよりも小さいと余白ができちゃうし、大きいとハミ出しちゃって大変ですね。地図のサイズは、HTMLソースコードのwidth属性height属性の値を変更すれば、任意のサイズを指定できます(単位は書かずに数値だけ入力します)
例えば、width属性の値を800、height属性の値を200と指定すれば、横幅800px、高さ200pxのサイズで地図が表示されるという具合。

  1. <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" width="800" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
地図のサイズを変更する

これで、広い画面で見た時にはエリア内にしっかり収まるようになりました。けれど、スマホで見た時には結局ハミ出しちゃいますね…:(
いかなるときも、表示するエリアにぴったりフィットさせるには、以下のように、width/height属性は削除して、style属性の値border:0の手前に、width:100%;height:100%;vertical-align:middle;を追記します。

  1. <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" frameborder="0" style="width:100%;height:100%;vertical-align:middle;border:0" allowfullscreen></iframe>
地図を親要素めいっぱいに広げる

これで、表示したいエリアのサイズがどう変わっても、エリアのサイズに合わせて地図がみっちり表示されるようになりました;D

ページトップへ戻る

Comment & Pingback

コメントを残す

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