WordPressのカスタムフィールドでGoogleMAPその２

この記事は1年以上前の記事のため、内容が古い可能性があります。

今回は「Google Maps Anywhere」は利用せず、「Custom Field GUI Utility 3」を改造した方法を説明いたします。「Custom Field GUI Utility 3」についてはこちらのサイトをご参照ください。

「かたつむりくんのWWW」さんのサイト

この方法のネックは

いろいろとファイルをアップロードする必要があり、手間がかかる。
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など）にて座標情報を取得できるようになりました。

あとはテーマにてこの数値を取得し、マップ化すれば完了です。マップ化に必要な記述方法やファイルなどは、こちらの記事を参照してください。

タグ：: API; GoogleMap

トラックバック

トラックバックURL

コメント一覧

1. Posted by ok 2011年08月23日

はじめまして。
会員制の登録サイトを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アカウントも２種類で試してみたのですが駄目でした。

突然の質問で申し訳ありません。
ヒントでも構いません、もし、これかも、というお心当たりあればお教えお願いいたします。

2. Posted by nandani 2011年08月23日

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タグ、

の○○○○の部分に入力してください。

（※）「map_setting.html」は当ページからダウンロードしていただいた「cfgu.3.0.5_replace_file.zip」の中にあるファイルの１つです。

これで正常に表示されるようになるかと思いますが、もしこれでも不具合が起きるようでしたらご連絡ください^^

3. Posted by ok 2011年08月24日

お返事ありがとうございます！
お返事を読みながらもう一度最初から見直してみたところ、
単純な記述ミスであった事に気づきました。

map_setting.htmlの書き換えを
例に出していただいたAPIキーでいいますと

『key=(ABQIAAAAItwB9hkpQEC13zZUWCEvxBT8CN-JSVKexJs65z66p78-fFkOlhTJ6alMIkW5L69eIkPtPZC7-J6v6A)』

にしておりました。
APIキーを囲っているカッコを消したところ、無事、正常に動きました…！^^;
単純なミスでお手間をかけさせてしまい、申し訳ありません！
無事マップが使用できそうです。大切に役立たせていただきます。
この度は、迅速で丁寧なお返事を下さり、ありがとうございました。

4. Posted by nandani 2011年08月24日

okさん。
無事設定できたようでよかったです＾―＾b

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL

ダリの雑記：WEBプログラム版