皆さん、ブログやホームページに地図を埋め込みたい時有りますよね。そんな時は、もともとGoogleマップの機能の「共有」で表示する方法と、プラグインを使う方法があります。
まずは、Google Mapの「共有」機能。
・Googleマップを開く
・埋め込みたい住所を指定する(場所を表示させる)
・サイドバーの「共有」をクリックする
・「地図を埋め込む」タブを選択する
・HTML(<iframe~部分)をコピーする
・ WordPressで地図を埋め込みたいページを開く
・「テキストモード」にし、地図を埋め込みたい場所にコピーしたHTMLを貼り付ける
と、まぁ意外と簡単です!!!サイズは3種類選べて下は中サイズ。ルートも埋め込めます!!
[広告]
次にプラグインを使う方法です。
WP Google Mapsというプラグインで作る方法。こちらを使うと色々なデザインの地図が使えたり、マーカーが複数使えたり・・・単なるマップ埋め込みより複雑なことができます。
プラグインと言っても、Googleのデータを加工しているので、そのデータを使えるようにAPIキーというものを取得する必要があります。
こちらは下記ページから取得できます。
ここの「キー取得」というボタンを押して、39桁のキーを入手します。これは色々なプラグインがありますが、だいたいどのプラグインでも必要なので、取得しておきましょう。
プラグインの取得はWP Google Mapsと検索してもらえば、MAP系ではナンバーワンのダウンロード数なので、すぐにトップに検索されます。
適用するとメニューが作られるので、まずはSETTINGで先ほど取得したAPIを登録します。※APIを取得するアイコンもありますが、上記リンクから取得したほうが分かりやすいです。
あとは、地図を固定するSETTINNGをします。よく、お店のHPの地図を触ったら、ズームしたりスクロールしてお店のポインターの場所を見失ってイラッとしませんか?特にスマホは指でスクロールするので地図を触ってしまい、ページをスクロールしようとしたら、地図をスクロールしてしまう・・・あれです。それを細かく設定でできます。ズームのみ禁止、スクロールのみ禁止・・など。
ただ、無料版で使えるのはここまでで、いろんなマーカや記述は有料版しか使えません。なんとルートも使えないのです!!!このプラグインの良いところは上述の地図のロックが細かくセットできることと、複数のポインターを置けるところです。もう少し無料でサービスしてほしかった。。。
こちらがWP Google Mapsで作ったものです。ちょっとカラーを変えています(あまり意味はありませんが。。。)
どうですか、スクロールしないし、ズームしないので見やすいね。クリックすると説明も出てきます。
↓ 綺麗なホームページ作りはこちらから ↓