| ブログトップ | API関連 | CMS関連 | JavaScript関連 |

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

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

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

この方法のネックは

  • いろいろとファイルをアップロードする必要があり、手間がかかる。
  • Custom Field GUI Utilityの「バージョン3.0.5」でのみ利用できる。
  • テーマも改造しなければマップが表示されない
  • さらっと改造したソースのため、不具合が起こる可能性あり。

などあります。

メリットは

  • カスタムフィールドからマップを立ち上げられる。
  • テーマ編集次第で吹き出しを自由にカスタマイズできる。

など。

簡単に設定したい場合は「WordPressのカスタムフィールドでGoogleMAPその1」の方法をどうぞ。

 

作業前の注意事項

Custom Field GUI Utility3.0.5がインストールされていること前提に説明していきます。
※バージョンにご注意ください

入ってない場合は、こちらのサイトからダウンロードしてインストールしてください。

また動作保証はいたしませんので、いきなり動作中の本番サーバに適応させることはやめたほうが良いかと思います。

 

手順

1.例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する (Google Maps API)

 

2.こちらのファイルをダウンロードして解凍してください。

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

の4ファイルが入っています。

この中の 「map_setting.html」をテキストエディタで開き、5行目「(APIキー)」と書かれている部分に、1.で取得したAPIキーを上書きしてください。

 

3.FTPソフトにてサーバにアクセスし、「wp-content/plugins/custom-field-gui-utility/」にアップロードしてください。(4ファイルのうち、「cfg-utility.class.php」と「cfg-utility.php」は上書きで)

 

4.「custom-field-gui-utility」内の「conf.ini」をダウンロードし、マップ用フィールドを追加してみてください。

「type」を「mapfield」にすることにより、そのフィールドはマップフィールドになります。

例)

[Lat_Long]
fieldname = マップ座標
type = mapfield
class = post
size = 60
sample =「マップ設定」から地図情報を設定してください。

追加できましたら、「conf.ini」を元の場所にアップロードしてください。

 

5.WordPressの管理画面に入り、記事の追加画面、または編集画面を開いてください。下図のようなフィールドが追加されているかと思います。

 

6.それでは、マップの設定を行います。フィールド右にある「マップを設定」をクリックしてください。ポップアップでマップ設定ウィンドウが開きます。このウィンドウでマーカー座標、中心座標、ズームレベルを設定してください。

 

7.6.の作業が終わりましたら「決定」ボタンを押してください。下図のようにマーカー座標緯度、マーカー座標経度、中心座標緯度、中心座標経度、ズームレベルが数値化されカスタムフィールドに入ります。

 

8.これでカスタムフィールド用タグ(get post metaなど)にて座標情報を取得できるようになりました。

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

このエントリーをはてなブックマークに追加

LINEで送る

トラックバック

トラックバックURL

コメント一覧

1. Posted by ok   2011年08月23日

はじめまして。
会員制の登録サイトをwordpressで作成しておりまして、誰にでも簡単に地図を登録できる方法は無いものか?と探しておりましたところ、こちらにたどり着きました。
いろいろなプラグインがありますが、こちらの方法ですと直感的に操作ができ、PCに不慣れな方でも操作がしやすいと感じております。まさに探していたもので、ぜひ使わせていただきたいです。

ローカル環境で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種類で試してみたのですが駄目でした。

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

2. Posted by nandani   2011年08月23日

okさん。
はじめまして。
コメントありがとうございます。

エラーについてですが、表示されたのはおそらくこういう画面だと思います。
http://www.nandani.sakura.ne.jp/img/WS000375.JPG

エラー文にも表示されているとおり、まず
http://code.google.com/intl/ja/apis/maps/signup.html
にて、APIキーを取得してください。
「使用するウェブサイトの URL:」には、「http://ドメイン名/」までで構いません。私のサイトを例にとると「http://www.nandani.sakura.ne.jp/」を入力すればOKです。

「APIキーを生成する」ボタンを押すと画面上部にキーが表示されます。
私のサイトを例にとると「ABQIAAAAItwB9hkpQEC13zZUWCEvxBT8CN-JSVKexJs65z66p78-fFkOlhTJ6alMIkW5L69eIkPtPZC7-J6v6A」というキーが出力されます。もちろんサイトによってキーは異なります。

これを「(wordpress設置フォルダ)/wp-content/plugins/custom-field-gui-utility/map/map_setting.html」(※)の5行目付近にある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」の中にあるファイルの1つです。

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

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
Copyright(c) 2010 - 2017 ダリの雑記