2007-01-18

軽快動作の Google Maps プラグイン Lightweight Google Maps

yuriko による 23:35:54 の投稿
カテゴリー: WordPressハック

当サイトで使っている Google Maps 表示プラグイン “Lightweight Google Maps” を公開します。これは Plug ‘n’ Play Google Map プラグイン をもとに、機能のブラッシュアップを図ったものです。

概要

Lightweight Google Maps プラグイン画面

Google Maps を固定ページとして表示します。記事に “Lat_Long” という名前のカスタムフィールドがあれば、緯度・経度として扱って、以下の要領で地図にマーカーを打ちます。マーカーをクリックすると吹き出しウィンドウが表示され、記事名・投稿日・本文の概要が表示されます。

  • デフォルトでは最新の100箇所
  • 指定したカテゴリーすべての地点
  • 特定の緯度経度を中心とした地点 (記事にある “Map View” をクリックした場合など)

このプラグインは Plug ‘n’ Play Google Map プラグインを参考に制作していますが、このプラグインでは必須だった Geo プラグインは不要となっています。また、サムネール表示機能を削除したかわりに、記事の概要を表示させるようにしています。

“Lat_Long” カスタムフィールドに位置情報を格納するには、投稿画面で手入力する他、同時リリースの Ktai Location プラグインも利用できます。

対応環境

  • WordPress 2.0 以降。WordPress ME 2.0.7 で動作確認していますが、おそらく本家版2.0 以降なら動くでしょう。
  • PHP 5 以降。PHP4 では動きません。public, private, protected など PHP5 専用の予約語を削除すれば動くと思いますが、動作確認はしていません。
  • 管理画面のローカライズは UTF-8 動作のウェブログのみ対応 (以後のバージョンで EUC-JP にも対応予定)。

設置方法

  1. 現在、Geo プラグイン、wp-eznavi プラグイン、Plug ‘n’ Play Google Map プラグイン等を利用している場合は、無効にしておきます。
  2. プラグインをダウンロードして展開し、FTP ソフト等で lightweight-google-maps フォルダごとプラグインディレクトリーに転送します。なお、README-ja_UTF8.txt および lw_googlemaps-ja_UTF.po は動作には不要なので削除してかまいません。(プラグインはまだ有効にしないでください)
  3. 次は、地図表示の固定ページを作ります。管理画面の投稿→ページ作成で、新規に固定ページを作ります。そして、地図を表示させたい部分に以下の空の div 要素を置きます。(Plug ‘n’ Play Google Map では “yf_map” という div 要素でした)
    <div id="google_maps"></div>
  4. テンプレートを修正します。フッター、サイドバーもしくはページのいずれのテンプレートに、以下の記述がなければ追加しておきます。
    <?php wp_footer(); ?>
  5. 位置情報があるときに “Map View” ボタンを出すには、メインインデックスのテンプレートで、<div class=”story”>……</div> の直後に、以下の記述を追加します。
    <?php if (function_exists('lwgm_button')) {lwgm_button();} ?>
  6. 地図ページにカテゴリーでの絞り込みメニューをつけるには、ページテンプレートで the_content() の直前に以下のコードを書きます。
    <?php 
    global $Lwgm_On;
    if (isset($Lwgm_On)) {?>
    <form action="" method="get"><div>
    <label>カテゴリーで絞り込み: 
    <?php dropdown_cats(FALSE,'all','name','asc',FALSE,FALSE,TRUE,
    FALSE,intval($_GET['cat'])); ?></label>
    <input type="submit" name="mode" value="表示" />
    </div></form>
    <?php }
  7. いよいよ Lightweight Google Maps プラグインを有効にします。
  8. 管理画面のオプション→Google Maps で設定項目を入力します。Google Maps の API キーを持っていなければ、取得してください。Plug ‘n’ Play Google Map プラグインを利用していた場合、オプション値は引き継がれています。
  9. Geo プラグイン等を使っていた場合は、管理画面の一番下にあるチェックボックスを on にしてオプションを更新します。こうすると、Geo プラグイン用のカスタムフィールド (_geo_location) が Lat_Long カスタムフィールドに変換されます。
  10. これで地図が表示されるはずです。お楽しみください。

使用方法

  • いきなり地図ページを表示させた場合、最近の位置情報100件読み込んでマーカーを打ちます。
  • 地図ページで、カテゴリーをプルダウンメニューから選んで「表示」ボタンを押すと、そのカテゴリーで投稿された記事の位置情報をすべて表示します。
  • 各記事で、Lat_Long カスタムフィールドに位置情報が格納されていれば “Map View” ボタンが表示されます。そのボタンをクリックされると、その地点を中心とした狭い範囲の地図が表示されます。
  • 位置情報を登録するには、投稿画面のカスタムフィールドの追加を行います。キー名は “Lat_Long” で、値は緯度・経度をコンマ区切りで繋げたものにします。 (例: 35.608797685462,139.56014977271)
  • また、同時リリースの Ktai Location プラグインを使えば、ケータイからの投稿時に位置情報を Lat_Long カスタムフィールドに格納することが可能です。

注意事項

  • PHP5 専用です。PHP4 でも前述の改造をすれば動くと思いますが、動作確認はしていません。
  • プラグインをインストールするだけでは動作しません。前述の設置方法を良く読んで作業してください。作業方法自体は、Plug ‘n’ Play Google Map プラグインとほぼ同様ですので、そちらの設置方法を参考にしてかまいません。
  • プラグインの設定値は Plug ‘n’ Play Google Map プラグインと共通になっています。ただし、Use thumbnail など、当プラグインで削除した機能の設定値はデーターベースには残しています。そのままでも動作に影響ありませんが、気になる場合は phpmyadmin 等で不要なオプション値を削除してください。
  • 管理画面は po ファイルを利用するローカライズを行なっています。現時点では UTF-8 動作のウェブログのみ対応ですので、EUC-JP, Shift_JIS で動作させている場合は英語の管理画面となります。
  • “Map View” 画像ボタンは Plug ‘n’ Play Google Map プラグインのものを流用しています。このプラグインのライセンスが不明なので、勝手に再配布するのは非常にマズいはずです。近いうちにオリジナル物と差し替える予定です。

Plug ‘n’ Play Google Map との相違点

  • 読み取る位置情報は Geo プラグインとは非互換になりました (フォーマットはほぼ同一ですが;-)。また、Geo プラグインなしで動作するようになりました。
  • すべての地点をマークせず、表示対象の位置情報を限定するようにしました。
  • 利用するメモリーが少なくなるよう工夫しています。すべての地点を表示しないため、1000箇所以上の位置情報を持っていても、メモリー不足になることはありません。

コメント・ピン通知 »

  1. はじめまして。
    PingMagで公開されている”Instant Googlemap Plugin”を試していたのですが、上手く表示されずに、こちらのプラグインをダウンロードさせていただきました。

    “Instant Googlemap Plugin”では、地図の画像が表示されなかったのですが、”Lightweight Google Map”では、オプション画面で「最近の位置情報マーカー表示数:」にい数値を入れると、ピンは表示されるのですが、地図が消えてしまいます。

    個別のエントリーページでも、ピンが表示されるのですが、地図が表示されません…。

    もし思いあたる解決策などありましたらアドバイスいただけますでしょうか。
    よろしくお願いいたします。

    246からのComment — 2007-02-26 (月曜日) @ 12:10:04
  2. 緯度と経度の値が逆に入っているようです。Lat_Long というフィールド名の通り、緯度・経度の順に修正してみてください。

    yurikoからのComment — 2007-02-26 (月曜日) @ 18:05:43
  3. 初めまして、ものすごいプラグイン
    大変重宝させていただいております。

    実装してみたのですが一点質問です。

    このプラグインは作成した「ページ」には
    適応が出来ないようなのですがいかがでしょうか。
    (なぜか入力したカスタムフィード["Lat_Long" ]が無視され、地図が表示されない・・・)

    「ページ」にいろいろな店舗情報を入れ店舗リストを作成しているので、
    ページ内に情報と合わせて店舗の地図を埋め込みたいと思っております。

    もし、適応させられる方法があればご教示ください!

    何卒よろしくお願いいたします!

    Ken

    YからのComment — 2007-08-08 (水曜日) @ 04:16:09
  4. このプラグインは作成した「ページ」には適応が出来ないようなのですがいかがでしょうか。

    はい、そういう実装にしています。固定ページに小さい地図を出すことは考慮していません。lw_googlemaps.php の63行目付近にある if 文を以下のように改造すればページでも地図が出るかもしれませんので、一度お試し願えますでしょうか。

    } elseif (get_option('lw_each_map_type') != 'LWGM_LINK_TO_MAP') {
    yurikoからのComment — 2007-08-08 (水曜日) @ 10:26:34
  5. 初めまして、word pressを使用し間もない、すずきと申します。

    この度、Yuriko様のサイトでLightweight Google Mapsのプラグインを発見し、さっそく導入を試みているのですが、Plug ‘n’ Play Google Mapで使用できたマップ内の吹き出しに表示される、サムネイル機能を復活させる事は可能でしょうか?何分PHPもかじったばかりで、申し訳ないのですが、教えて頂けると幸いです。
    ご指導の程、よろしくお願い申し上げます。

    すずきからのComment — 2007-08-08 (水曜日) @ 20:40:46
  6. 残念ながら、Plug ‘n’ Play Google Map で実装されていたサムネール機能は削除しております。今度、記事に貼り込んだ写真をサムネール化して吹き出しに入れる機能アップを検討していますので、それまでお待ちください。

    yurikoからのComment — 2007-08-08 (水曜日) @ 21:08:16
  7. 早急なご返答に感謝致します。
    何分、わからない事が多くて開発を頼りにしがちになってしまい、申し訳ありません。
    新しいプラグイン楽しみにしております、ありがとうございます。
    すずき

    すずきからのComment — 2007-08-09 (木曜日) @ 03:20:13
  8. 重なる質問で失礼致します。
    前回の質問とは別件で、プラグインの導入をさせて頂いたのですが、固定マップは大きな地図が表示され、各個別記事にはミニマップが表示されるのですが、記事の一覧になった時に枠のみでマップが表示されないのですが、なにか対処方はございますでしょうか、何度も質問してしまい大変申し訳ございません。

    wordpressバージョンは諸事情により2.0.10を使用しておりますのでプラグインも一つ前のバージョン1.01をインストールさせていただいております。

    ご査収の程、宜しく願い申し上げます。

    すずきからのComment — 2007-10-07 (日曜日) @ 18:25:01
  9. このプラグインで表示される地図に、外部の3rd party API (GeoIQ)を使ってヒートマップデータを表示したい場合はプラグインファイルを改変すればよいのでしょうか?

    それとも、WordPressとは別に通常の方法でGoogle Mapを作成し、そこにAPIを適用する方法を選んだ方が良いのでしょうか?

    お手数ですが、今件に関してご連絡ください。

    Takuya MisawaからのComment — 2007-11-18 (日曜日) @ 17:00:30
※スパム対策プラグインの影響により、すぐにトラックバックが反映されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る

コメント投稿

※発言の責任を明確にするため「名無し」「通りすがり」「匿名希望」等の匿名は不可とします。捨てハンドルでもいいので必ず名乗ってください。
XHTML (使えるタグ): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> .
※スパム対策プラグインの影響により、すぐにコメント内容が表示されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る