2006-12-21
くもり

Plug ‘n’ Play Google Map を調整

yuriko による 22:26:34 の投稿
カテゴリー: WordPressハック, サイト更新情報

またまた Plug ‘n’ Play Google Map プラグインの調整を行いました。まずは、すべてのポイントで日付が出るようバグ修正と、本文の要約を表示させる機能追加です。

このプラグインは、各ページのサムネール画像を表示させる機能がありますが、サムネール画像を作るのはちょっと面倒なことと、テキスト情報もあった方がよかろうということで、今回の修正となりました。

330行〜359行付近を以下のように修正します。yf_createMarker() 関数を修正して、excerpt 引数を追加するのと、その関数を呼び出す部分では、要約の最初の行を excerpt 引数として渡します。また、the_date() 関数をやめて get_the_time() 関数を使うことで、必ず日付がでるようにします。

// Creates a marker whose info window displays the given number
function yf_createMarker(point, title, link, date, excerpt) {
  var marker = new GMarker(point);
  // setting up the look of the marker
  var html = "<div class=\\"infowindow-map\\"><a href=\\""+link+"\\"><strong>"+title+"</strong></a><br />"+date+"</div><p style=\\"width:220px;\\">"+excerpt+"</p>";
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
  });
  return marker;
}
//Below is where markers are created if there is latitude and longitude data
<?php
  $yf_query = new WP_Query('showposts=999999');
  $num_marker = 0;
  while ($yf_query->have_posts()) : $yf_query->the_post();
    if ($num_marker >= 100) {
      break;
    } elseif (get_Lat() && get_Lon()) {
      $num_marker++;
      $lat = get_Lat();
      $long = get_Lon();
      $title = htmlspecialchars(get_the_title(), ENT_QUOTES);
      $link = get_permalink();
      $date = get_the_time('Y-m-d');
      $excerpt = preg_replace('/^\\s+/', '', get_the_excerpt());
      $excerpt = preg_replace('/\\n.*$/m', '', $excerpt);
      echo "var point = new GLatLng(".$lat.", ".$long.");\\n";
      echo 'var marker = yf_createMarker(point, "' . $title. '", "' . $link. '", "' . $date . '", "' . $excerpt . '");' . "\\n";
      echo "map.addOverlay(marker);\\n\\n";
    }
  endwhile;
?>

まだ、全ての記事を走査して全ての位置情報をピン打ちする仕組みなのですが、これを修正して「直近100個だけピン打ち」「特定カテゴリーで絞り込み」するには、Geo プラグインの関数である get_Lon(), get_Lat() 関数を使うのをやめて、wp-eznavi プラグインのごとく直接データーベースにアクセスして位置情報を読み出すようにしないといけませんね。

[追記] 上から4行目の var html を作る部分を1行にまとめました。修正前は、javascript において文字列演算を2〜3回行うようになっていて、ページ表示時に処理が重たくなってしまっていましたが、現在のコードは少しは軽くなるようです。サムネール画像付与機能は使ってないので、削除してしまいました。さらに、直近100個だけピン打ちを無理矢理実装しました。$yf_query オブジェクトが全投稿データーを持つ凶悪コードはそのままですが、そんなに重くならないようです。あとは、カテゴリーで絞る機能を付けるだけ。

[さらに追記] 直近100個だと、古い記事の「Map View」アイコンをクリックしたとき、その記事に対応するマーカーが打たれません。このため、中心位置を指定して地図ページを呼び出したとき (==「Map View」アイコンをクリックしたとき) は、中心から緯度は ±0.04、経度は ±0.06 の範囲にある位置データーをピン打ちするようにしました。これで、古い記事でも大丈夫です。ただし、スクロールさせると、その外側にはマーカーはありません。Ajax を活用して、スクロールさせたときは、動的に位置情報のピン打ちをすればよさそうですが、どうやればいいかは検討中です。

関連記事

トラックバック・コメント »

トラックバック・コメントはありません。
※スパム対策プラグインの影響により、すぐにトラックバックが反映されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る

コメント投稿

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

上に戻る