Google Maps導入方法

Movable TypeにGoogleMapsを導入してみました。
(以下の解説だけでは問題点があるため参考にしないでください!)

まずは『MTGoogleMaps』というプラグインをインストールします。最近、何かするたびにプラグインをインストールすることが多くなったので、徐々にこの作業には慣れてきた気がする。

『MTGoogleMaps』プラグインダウンロードページ
"Download MTGoogleMaps 4.0 (8.0K)"と記載してあるリンクからダウンロードしてください。

解凍したらフォルダ名が「MTGoogleMaps4」となっているので、「MTGoogleMaps」に変更してサーバー内の「Plugins」ディレクトリにアップロードします。アップロードしたら「GoogleMap.pl」というファイルのパーミッションを「755」に変更。パーミッションの変更はファイル名で右クリックして属性変更を選択します。

あっ、ちなみに「MTGoogleMaps」というプラグインはMovableTypeのバージョン3.2以降にしか対応していないみたいです。旧バージョンを利用の方はMTをアップグレードしてからインストールしてください。

プラグインのインストールが終わったら「Google Maps API Key」を取得します。取得には「Google アカウント」が必要なので、持っていないかたは、まずGoogleアカウンントを取得してください。

『Google アカウント』取得ページ

『Google Maps API Key』取得ページ

『API Key』を取得したら、Movable Typeの管理画面の「システム⇒プラグイン」にある「MTGoogleMaps」の「設定を表示」リンクをクリックし、「API Key」欄にKeyコードを入力します。入力したら「変更を保存」ボタンをクリックし、MTGoogleMapsの設定は完了。

さてさて、ここまで行ったらようやく実際に使うことができるのですが、まだメインテンプレート内でしか、利用できません。エントリーアーカイブテンプレート内で使うにはさらにプラグインが必要なんです。『Process Tags』というプラグインをインストールしましょう。

『Process Tags』プラグインダウンロードページ

ダウンロード後、解凍したら『processtags.pl』をサーバー内の『plugins』ディレクトリに、『postproc.pm』を『extlib/bradchoate/』ディレクトリにアップロードします。(bradchoateディレクトリがない場合は作成してください)そして、両ファイルのパーミッションを「755」に変更。

アップロードが完了したら、MTの管理画面に戻り、メインテンプレートやエントリーアーカイブテンプレートの<$MTEntryBody$>を<$MTEntryBody process_tags="1"$>に変更します。

ここまでやれば任意の場所に<MTGoogleTags>というテンプレートタグを使うことができます。では、六本木ヒルズを参考にGoogleMapsを表示してみます。

<MTGoogleMaps coordinates="35.660423,139.729204" info="六本木ヒルズ" width="530px" height="300px" zoom="14">
と記述すると以下のような表示になります。

東京都港区六本木6-10-1 (Sorry, this address cannot be resolved.)

「coordinates」は地図の緯度と経度。「緯度,経度」の順番になっています。これを間違えると、とんでもないところが表示されるので気をつけてください。
「info」はポインターからポップアップで表示する吹き出し内のテキスト。
「width、height」は地図の表示サイズ。
「zoom」は表示時の地図の倍率。0~17の数値で指定。

緯度や経度は「Geocoding.jp」で簡単に調べることが出来ます。
どうだろう、うまくできたかな?

※注意…Firefoxだと問題なく表示されるんですが、IEだとページ自体が表示されなくなることがわかりました。今後、対応したいと思います。

追記:やっぱり原因がよくわからず、他のやり方にすることにしました。参考にしたのは『Ogawa::Memoranda』さんの「Mapper」というプラグイン。解説付きなので試してみてください。

2006年07月