WordPress の Google Maps プラグイン

2009年2月4日

WordPress 用の Google Map プラグインを探していたところ、これというのがなかなか見つからなかったのですが、ついにすばらしいプラグインを見つけましたのでご紹介します。しかも日本語です(これ大事)

Google Maps Anywhere – WordPress Plugins/JSeries

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

上記のサイトから、あらかじめ zip ファイルをダウンロードしておきます。解凍する必要はありません。

WordPress のメニューから、プラグインの新規追加を選択します。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

いつものキーワードでの検索ではなくて、ファイルを選択ボタンで先ほどダウンロードしたファイルを選びます。

ファイルを選択したら、いますぐインストールを押します。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

インストールが終わったら、プラグインを有効化します。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

プラグイン管理でグリーンの欄に表示されれば成功です。

Google Maps Anywhere - WordPressプラグイン

Google Maps Anywhere - WordPressプラグイン

次に、Google Maps API キーを取得します。

Sign Up for the Google Maps API

Sign Up for the Google Maps API

Sign Up for the Google Maps API

ページをスクロールすると、一番下に利用規約のチェックと、ホームページの URL を入力する欄があります。入力したら API キーの生成ボタンを押します。

Login - Google Account

Login - Google Account

Google アカウントでログインが必要です。もし、Google アカウントを持っていない人はこの機会にアカウントを作りましょう。いろいろと使い道がありますが、アカウント名は Gmail 用だと思って作ると良いでしょう。

Google Maps API キー

Google Maps API キー

一番上に Google Maps API key が表示されますので、コピーします。
Google Maps API key は URL ごとに発行が必要です。この URL 以下のフォルダにあるページなら何度でも使えます。

WordPress の新規投稿で、メディア用のアイコンがひとつ増えています。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

Google マップを追加、というアイコンをクリックすると、先ほどの Google Maps API キーを入力するウィンドウが表示されます。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

長いキーなので注意深くコピーしてください。キーが正しくないと地図が表示されません。

入力して、設定を更新するボタンを押すと、キーが表示されます。表示されたら、左上の Google マップというタブをクリックしましょう。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

日本地図が表示されれば、Google Maps API キーが正しく入力されています。地図が表示されなければ、オプションタブでもう一度確認しましょう。

地図の上に 地図を検索 というフォームがありますので、ここで目的の場所を検索します。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

住所などを入力して地図を表示したい場所を検索します。拡大縮小や位置の微調整などは、地図上でダイレクトに変更してください。結果をきちんと保存してくれます。(すばらしすぎる)

記事に表示する地図のサイズは、手作業で入力しておきます。100% や 400px などの指定ができます。必ず単位を入力してください。100 などの数字だけだと反映されません。一度指定すれば次回からは保存されていますので、手間がありません。(これも素晴らしい)

緯度や経度などは変更する必要はありませんので、そのままでOKです。カスタムフィールドもここでは使いません。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

投稿に挿入、というボタンを押すと、投稿にタグが埋め込まれます。

Google Maps Anywhere - WordPress プラグイン

Google Maps Anywhere - WordPress プラグイン

実際に表示される地図がこちらです。

[googlemap lat="35.693439" lng="139.749859" width="480px" height="360px" zoom="17" type="G_NORMAL_MAP"]日本武道館[/googlemap]

同様にストリートビューも表示できます。

[googlemap lat="35.6931" lng="139.749192" yaw="69.57402169933562" pitch="-13.657057223533688" zoom="0" width="480px" height="360px" type="STREETVIEW"]日本武道館[/googlemap]

このとおり!

作ってくださった作者の方、すばらしいプラグインをありがとうございます。

コメント / トラックバック2件

  1. [...] きるようになりたいです で、今回参考にさせていただいたサイトはこちら http://blog.nekohacks.com/wordpress/419.html 非常に丁寧でわかりやすかったと思います ホントは自分でやった手順を書 [...]

コメントをどうぞ