Googleマップをホームページに埋め込む方法

最近ではホームページのアクセスマップにほとんどGoogleマップが使われてる。
ちょっと前まで手書きで作ってたのになぁ…っていうオッサン発言は置いといて、埋め込み方法。

Googleマップでコードを取得する

Googleマップでホームページに埋め込みたい場所を決めたら、左上の「メニュー」アイコンをクリックする。
Googleマップの埋め込み方法01

ニョキっと出てくるので「地図を共有または埋め込む」をクリックする。
Googleマップの埋め込み方法02

ポップアップウィンドウが出たら「地図を埋め込む」をクリック。
埋め込みたい地図の大きさ(小・中・大・カスタムサイズ)を決めて、<iframe~から始まるコードを、ホームページの埋め込みたい場所にコピペして完了。
Googleマップの埋め込み方法03

実際に埋め込んでみたGoogleマップ

WordPressでプラグインを使うと、もっとカンタンに埋め込める!

WordPressロゴ

WordPressでホームページを作っているなら、プラグインを使えばもっと簡単に埋め込める。

オススメは「Simple Map」

プラグイン「Simple Map」

Simple Map」は、住所や建物名、郵便番号などのテキストで、Googleマップを表示できるプラグイン。
例えば、投稿内容に下記のように書くと、

[map]通天閣[/map]

Simpleマップ表示結果(通天閣)

どこやねん!!!

大阪のランドマークタワーが大分県のふぐ料理専門店で表示される等、期待した結果と違う場合は、住所や郵便番号などで書き直せばオッケー。

サイズを指定したり座標で表示することもできるので、詳しくは公式ページを参考に。
Simple Map – 超簡単&スマフォ対応のGoogle Map(Firegoby)

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

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