WP:Google Maps カテゴリー一覧をカスタマイズ

はてなにブックマーク このページをdel.icio.usに登録 このエントリをBuzzurlにブックマーク この記事をLivedoorクリップ! この記事をGoogleブックマーク Yahoo!ブックマークに登録 このエントリをニフティクリップに登録 このページを POOKMARK Airlines の行き先に登録する このエントリを BlogPeople Instant Bookmark に登録 PingKingポッケに追加

Google Maps 投稿の実験コンテンツ「仙台のちょっといいとこ」のカテゴリ一覧表示をカスタマイズしてみました。

せっかくの Google Maps、カテゴリ一覧にもちょっと一工夫欲しいですよね。
仙台のちょっといいとこ」では、StreetView も表示させているので、デフォルトのカテゴリ一覧に本文も表示させる仕様では、重いことこの上なしです。

LabridWP では、Google Maps 投稿・表示に Google Maps Anywhere プラグインを使っています。
※GoogleMaps系プラグインではイチオシ。簡単投稿が便利すぎです。

このプラグインでは、投稿時に [Lat_long] という緯度経度登録用のカスタムキーにボタン一発で登録する機能がありますので、このカスタムキーを利用します。

Google Maps 投稿画面?Lat_Long カスタムキー

Google Maps 投稿画面?Lat_Long カスタムキー

投稿時には、このカスタムキーを登録するだけで、カテゴリ一覧には小さな地図画像、詳細ページには、Google Maps が表示されるように調整します。

以下に、「仙台のちょっといいとこ」用のカスタマイズ内容を紹介します。
プラグインが出力するソースの緯度経度値をカスタムキーに差し替えただけの簡単カスタムです。

○カテゴリ一覧テンプレート(category-XX.php)

<a href="<?php the_permalink() ?>" rel="bookmark"><img src="http://maps.google.com/staticmap?markers=<?php echo c2c_get_custom('Lat_Long'); ?>,red&amp;zoom=15&amp;size=200x150&amp;key=(Google Maps API Key)&amp;hl=ja" /></a>

地図画像表示用URLに指定するパラメータのうち、緯度経度を表示する [markers=] にカスタムキー [Lat_Long] を読み込みます。
あとは [size=] [zoom=] にデザインに見合った数値(固定値)を、key には登録した Google Maps API Key を入れます。

これでミニ地図(画像)表示の設定は完了です。

○詳細ページテンプレート(single.php)
いつもどおり、if で「該当カテゴリのエントリーのみ」という設定を作成し、その中に テンプレートを記述します。
今回は、単純に カスタムキーから GoogleMaps を表示させるだけなので、汎用テンプレートをコピーし、その本文表示部分の直前に以下のソースを記述しました。

<div class="googlemaps" style="width:520px;height:250px;"><a href="http://maps.google.com/maps?f=q&amp;hl=ja&amp;geocode=&amp;q=<?php echo c2c_get_custom('Lat_Long'); ?>&amp;ie=UTF8&amp;ll=<?php echo c2c_get_custom('Lat_Long'); ?>&amp;t=h&amp;z=16&amp;maptype=G_NORMAL_MAP" title="<?php echo c2c_get_custom('Lat_Long'); ?>"><img src="http://maps.google.com/staticmap?markers=<?php echo c2c_get_custom('Lat_Long'); ?>,red&amp;zoom=16&amp;size=520x250&amp;key=(Google Maps API Key)&amp;hl=ja" alt="<?php echo c2c_get_custom('Lat_Long'); ?>" title="<?php echo c2c_get_custom('Lat_Long'); ?>" /></a></div>

サイズ、ズームは固定値です。
(今回は、投稿の手間をできるだけ減らしたいという目的もあったので、固定値で良しとしました。)

サイズはレイアウトの統一のためにも固定値でOKなのですが、ズーム値は状況によっては変更したい場合もあるでしょう。
その場合には、[map_zoom] といったカスタムキーを作り、ズーム値を登録しておき、上記コードの [z=16 / zoom=16] の部分を [z=<?php echo c2c_get_custom('Lat_Long'); ?>] とすればいいでしょう。

※本当は、StreetView も同様にカスタムキーから表示させたかったのですが、StreetView の表示には位置情報の他に方角・俯角の設定も必要なのでカスタムキーからの表示は現実的ではないと判断しました。
(これらをそれぞれカスタムキーで登録するくらいならプラグインの投稿機能に頼る方がずっと手軽)

理想は、StreetView を投稿すると、StreetView の位置情報を元に、自動でその登録地点の GoogleMaps を同サイズで表示、カテゴリ一覧にはミニ地図表示、という仕様です。
さらに StreetView と GoogleMaps を連動させられたら、モアベターです。

StreetView と GoogleMaps は本当にすごいコンテンツだと思います。
これを利用した、もっと面白くもっと手軽に有効に使える方法を模索中です。

はてなにブックマーク このページをdel.icio.usに登録 このエントリをBuzzurlにブックマーク この記事をLivedoorクリップ! この記事をGoogleブックマーク Yahoo!ブックマークに登録 このエントリをニフティクリップに登録 このページを POOKMARK Airlines の行き先に登録する このエントリを BlogPeople Instant Bookmark に登録 PingKingポッケに追加

関連記事

タグ:, , ,