今回は「Google Maps Anywhere」は利用せず、「Custom Field GUI Utility 3」を改造した方法を説明いたします。「Custom Field GUI Utility 3」についてはこちらのサイトをご参照ください。
この方法のネックは
- いろいろとファイルをアップロードする必要があり、手間がかかる。
- Custom Field GUI Utilityの「バージョン3.0.5」でのみ利用できる。
- テーマも改造しなければマップが表示されない
- さらっと改造したソースのため、不具合が起こる可能性あり。
などあります。
メリットは
- カスタムフィールドからマップを立ち上げられる。
- テーマ編集次第で吹き出しを自由にカスタマイズできる。
など。
簡単に設定したい場合は「WordPressのカスタムフィールドでGoogleMAPその１」の方法をどうぞ。
作業前の注意事項
Custom Field GUI Utility3.0.5がインストールされていること前提に説明していきます。
※バージョンにご注意ください
入ってない場合は、こちらのサイトからダウンロードしてインストールしてください。
また動作保証はいたしませんので、いきなり動作中の本番サーバに適応させることはやめたほうが良いかと思います。
手順
１．例によってあらかじめAPIキーを取得してください。
Google MAPS API に登録する （Google Maps API）
２．こちらのファイルをダウンロードして解凍してください。
Custom Field GUI Utility3の差し替えファイル：「cfgu.3.0.5_replace_file.zip」をダウンロード
このzipファイルを解凍すると
- cfg-utility.php
- cfg-utility.class.php
- map/map_setting.html
- map/map_setting.js
の４ファイルが入っています。
この中の 「map_setting.html」をテキストエディタで開き、５行目「（APIキー）」と書かれている部分に、１．で取得したAPIキーを上書きしてください。
３．FTPソフトにてサーバにアクセスし、「wp-content/plugins/custom-field-gui-utility/」にアップロードしてください。（４ファイルのうち、「cfg-utility.class.php」と「cfg-utility.php」は上書きで）
４．「custom-field-gui-utility」内の「conf.ini」をダウンロードし、マップ用フィールドを追加してみてください。
「type」を「mapfield」にすることにより、そのフィールドはマップフィールドになります。
例）
[Lat_Long]
fieldname = マップ座標
type = mapfield
class = post
size = 60
sample =「マップ設定」から地図情報を設定してください。
追加できましたら、「conf.ini」を元の場所にアップロードしてください。
５．WordPressの管理画面に入り、記事の追加画面、または編集画面を開いてください。下図のようなフィールドが追加されているかと思います。
６．それでは、マップの設定を行います。フィールド右にある「マップを設定」をクリックしてください。ポップアップでマップ設定ウィンドウが開きます。このウィンドウでマーカー座標、中心座標、ズームレベルを設定してください。
７．６．の作業が終わりましたら「決定」ボタンを押してください。下図のようにマーカー座標緯度、マーカー座標経度、中心座標緯度、中心座標経度、ズームレベルが数値化されカスタムフィールドに入ります。
８．これでカスタムフィールド用タグ（get post metaなど）にて座標情報を取得できるようになりました。
あとはテーマにてこの数値を取得し、マップ化すれば完了です。マップ化に必要な記述方法やファイルなどは、こちらの記事を参照してください。