この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。
今回は「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など）にて座標情報を取得できるようになりました。
あとはテーマにてこの数値を取得し、マップ化すれば完了です。マップ化に必要な記述方法やファイルなどは、こちらの記事を参照してください。
コメント
はじめまして。
会員制の登録サイトをwordpressで作成しておりまして、誰にでも簡単に地図を登録できる方法は無いものか？と探しておりましたところ、こちらにたどり着きました。
いろいろなプラグインがありますが、こちらの方法ですと直感的に操作ができ、ＰＣに不慣れな方でも操作がしやすいと感じております。まさに探していたもので、ぜひ使わせていただきたいです。
ローカル環境でbitnamiにて作成をしておりました時は、問題なく動作したのですが、ネット環境にて試してみたところ、マップが読み込めなくなってしまいました。
もしお心当たりあればご教授願えないでしょうか？
wordpres バージョン2.92
Custom Field GUI Utility3.0.5を使用しております。
導入にあたり、テーマをデフォルトにし、プラグインもCustom Field GUI Utility以外は停止しました。
問題の現象ですが、
カスタムフィールドの『マップを設定』を押すと、ポップアップウィンドウが出て、「このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/signup.html で作成できます。」と出ます。
マップが表示される部分はグレーで、上部にある地名で検索するフォームで検索してみても何も出てきません。
http://xxxx.xxxx.com/wp-content/plugins/custom-field-gui-utility//map/map_setting.html?cfg_lat_long
がポップアップウィンドウに記されているアドレスでしたので、
http://xxxx.xxxx.com/でのキーの取得をはじめとして、
スラッシュで区切っていくつもキーの取得をしてみたのですが、
どのキーでも現象は変わりませんでした。
取得のためのgoogleアカウントも２種類で試してみたのですが駄目でした。
突然の質問で申し訳ありません。
ヒントでも構いません、もし、これかも、というお心当たりあればお教えお願いいたします。
okさん。
はじめまして。
コメントありがとうございます。
エラーについてですが、表示されたのはおそらくこういう画面だと思います。
https://nandani.sakura.ne.jp/img/WS000375.JPG
エラー文にも表示されているとおり、まず
http://code.google.com/intl/ja/apis/maps/signup.html
にて、APIキーを取得してください。
「使用するウェブサイトの URL:」には、「http://ドメイン名/」までで構いません。私のサイトを例にとると「https://nandani.sakura.ne.jp/」を入力すればOKです。
「APIキーを生成する」ボタンを押すと画面上部にキーが表示されます。
私のサイトを例にとると「ABQIAAAAItwB9hkpQEC13zZUWCEvxBT8CN-JSVKexJs65z66p78-fFkOlhTJ6alMIkW5L69eIkPtPZC7-J6v6A」というキーが出力されます。もちろんサイトによってキーは異なります。
これを「(wordpress設置フォルダ)/wp-content/plugins/custom-field-gui-utility/map/map_setting.html」（※）の５行目付近にあるscriptタグ、
<script src=”http://maps.google.com/maps?file=api&v=2&key=○○○○” type=”text/javascript”></script>
の○○○○の部分に入力してください。
（※）「map_setting.html」は当ページからダウンロードしていただいた「cfgu.3.0.5_replace_file.zip」の中にあるファイルの１つです。
これで正常に表示されるようになるかと思いますが、もしこれでも不具合が起きるようでしたらご連絡ください^^
お返事ありがとうございます！
お返事を読みながらもう一度最初から見直してみたところ、
単純な記述ミスであった事に気づきました。
map_setting.htmlの書き換えを
例に出していただいたAPIキーでいいますと
『key=(ABQIAAAAItwB9hkpQEC13zZUWCEvxBT8CN-JSVKexJs65z66p78-fFkOlhTJ6alMIkW5L69eIkPtPZC7-J6v6A)』
にしておりました。
APIキーを囲っているカッコを消したところ、無事、正常に動きました…！^^;
単純なミスでお手間をかけさせてしまい、申し訳ありません！
無事マップが使用できそうです。大切に役立たせていただきます。
この度は、迅速で丁寧なお返事を下さり、ありがとうございました。
okさん。
無事設定できたようでよかったです＾―＾b