[wp] Lightweight Google Maps カテゴリーごとにアイコンを変更する

2010/01/18 by

Lightweight Google Maps 1.4.0の固定ページに表示される地図のアイコンをカテゴリーごとに変更する方法のメモです。

locations.phpの修正

155行目位にあるpost_info()にカテゴリー情報（ID）を追加する。

function post_info($lat, $lon) {
    $title = get_the_title();
    $link = get_permalink();
     //-------------ここから----------------//
    $cats = get_the_category(); 
    $category = ($cats[0]->category_parent)? $cats[0]->category_parent : $cats[0]->cat_ID;
    //-----------ここまで追加--------------//
    $datetime = get_the_time('U');
    $excerpt = preg_replace('/^\s+/', '', get_the_excerpt());
    $excerpt = preg_replace('/\n.*$/m', '', $excerpt);
    return compact('lat', 'lon', 'title', 'link', 'datetime', 'excerpt', 'category');
}

168行目付近にあるoutput_xml()で出力しているXMLにカテゴリーのタグを追加する。

1	`<category>$category</category>`

以下全文。

function output_xml() {
    $encoding = get_option('blog_charset');
    header("Content-Type: application/xml; charset=$encoding");
    echo <<< E__O__T
<?xml version="1.0" encoding="$encoding"?>
<markers>
 
E__O__T;
    while ($m = array_shift($this->markers)) {
        $m = array_map('wp_specialchars', $m);
        extract($m);
        $date = date(INFOWINDOW_DATE_FORMAT, $datetime);
        echo <<<E__O__T
<marker>
<lat>$lat</lat>
<lon>$lon</lon>
<title>$title</title>
<category>$category</category>
<link>$link</link>
<date>$date</date>
<excerpt>$excerpt</excerpt>
</marker>
 
E__O__T;
    }
    echo <<< E__O__T
</markers>
 
E__O__T;
    return;
}

lw_googlemaps.phpの修正

カテゴリーIDによってアイコンを変更するJavaScript関数を500行目付近にあるwindow_content()の前後に追加する。
アイコンはGoogle公式のものがあるのでそれを使用してます。

//カテゴリーごとにアイコンを作成
function get_original_marker(point, catID){
    var Icon = new GIcon();
     
    switch (catID){
        case "3"://ホテル
        Icon.image = 'http://maps.google.co.jp/mapfiles/ms/icons/lodging.png';
        Icon.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/lodging.shadow.png";
        break;
         
        case "4"://海
        Icon.image = 'http://maps.google.co.jp/mapfiles/ms/icons/sailing.png';
        Icon.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/sailing.shadow.png";
        break;
         
        case "5"://山
        Icon.image = 'http://maps.google.co.jp/mapfiles/ms/icons/campground.png';
        Icon.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/campground.shadow.png";
        break;
         
        case "6"://スパ
        Icon.image = 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png';
        Icon.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png";
        break;
         
        default:
        Icon.image = 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png';
        Icon.shadow = "http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.shadow.png";
         
    }
    Icon.iconSize = new GSize(32, 32);
    Icon.shadowSize=new GSize(59,32);
    Icon.iconAnchor = new GPoint(16, 32);
    Icon.infoWindowAnchor = new GPoint(16, 1);
     
    return new GMarker(point, Icon);
}

独自アイコンはアイコンのファイル名をカテゴリーID.pngとかにして、
テンプレートディレクトリの中に入れれば使えます。

Icon.image = '<?php bloginfo('template_directory'); ?>/images/icons/'+catID+'.png';

次に、create_marker()のGMakerインスタンス作成部分を変更する。

デフォルトソース：

1	`var` `marker =` `new` `GMarker(loc[0]);`

変更後ソース：

1	`var` `marker = get_original_marker(loc[0], loc[2].category);`

「[wp] Lightweight Google Maps カテゴリーごとにアイコンを変更する」への8件のフィードバック

こんにちは、LightweightGoogleMapsの修正をする上で、とても参考にさせていただきました。
ありがとうございます。
しかし、この内容で修正してみましたが、期待の動作とならない為、ソースを見て考えていたところ、
lw_googlemaps.phpのJavaScript関数parse_loc()も修正が必要であることに気がつきました。

//前略
    var date    = xmldoc.documentElement.getElementsByTagName('date');
    var excerpt = xmldoc.documentElement.getElementsByTagName('excerpt');
    var category = xmldoc.documentElement.getElementsByTagName('category');//追加
 
//中略
        var desc = {
            'title'  : GXml.value(title[i]),
            'link'   : GXml.value(link[i]),
            'date'   : GXml.value(date[i]),
            'excerpt': GXml.value(excerpt[i]),     
            'category': GXml.value(category[i])  //追加(前の行のコンマを忘れずに)
        };
//後略

他に何かありましたらフォローいただければと思います。
以上です。

返信

Tenderfeel

2010/05/20 10:15

sa-to さん >

どうやら追加だけして手順に書き忘れてたようです(笑)
コメントありがとうございます
返信
LWGM

2012/01/15 03:38

古い記事に参照で申し訳ありません。
こちらの記事を参考にカテゴリーごとにアイコンを変更できたのですが、
ツールチップにタイトルを表示したいのですが、行き詰まっており
お力をお貸しいただけないかと思い、質問させていただきます。

return new GMarker(point, Icon);　のところを

var markeropts = new Object();
markeropts.icon = Icon;
markeropts.title = ‘ここにタイトルを代入’;

return new GMarker(point, markeropts);

としてみたのですが、どのようにタイトルを代入すればいいのか分からないのです。

ご教授いただけますと助かります。
何とぞ宜しくお願い致します。
返信
Tenderfeel

2012/01/17 09:50

LWGM さん>
get_original_marker() の中でGoogle Mapsのカスタムアイコンを作成しているのはお分かりかと思います。
このサンプルはAPI バージョン2.5以前に書いたものなので、
マーカーを返す部分が return new GMarker(point, Icon) となっているのですが、
この書き方だとGMarkerのコンストラクタで設定出来る引数は　GMarker(latlng:GLatLng, icon?:GIcon, inert?:Boolean)　という事になります。
http://code.google.com/intl/ja-JP/apis/maps/documentation/javascript/v2/reference.html#GMarker

これにタイトルを追加するのであれば、2.5以降の表記にする必要があります。
2.5以降は　GMarker(latlng:GLatLng, opts?:GMarkerOptions) なので、

return new GMarker(point, {icon:Icon})

となり、

return new GMarker(point, {icon:Icon, title:’マーカーのタイトル’})

とオプションを設定すればタイトルも追加されると思います。
返信
LWFM

2012/01/17 17:30

Tenderfeelさん

お忙しいところお返事ありがとうございます！

　return new GMarker(point, {icon:Icon, title:’マーカーのタイトル’})
これはおそらく、以下と同じことだと思うのですが、

　var markeropts = new Object();
　markeropts.icon = Icon;
　markeropts.title = ’マーカーのタイトル’;
　return new GMarker(point, markeropts);

マーカーのタイトルを「どうやって」タイトルを取得してここに入れれるかが分からないのです。。。

var title = GXml.value(markers[i].getElementsByTagName(“title”)[0]);
といった感じで、タイトルを取得すればいいのでしょうか？

map.addOverlay のところにも、titleを指定しなければならないでしょうか？？

その前に、var markers = xmlDoc.documentElement.getElementsByTagName(“marker”); が必要？？？

お手数おかけいたしますが、ご教授いただけますと助かります。
返信
Tenderfeel

2012/01/18 12:41

LWGM さん>

そもそもタイトルとして設定したい文字列は何ですか？アイコン名？記事タイトル？
XMLのタイトルを取ろうとしてるので後者と推測すると、
タイトルは既にoutputされるXMLに含まれているので
create_marker()のGMakerインスタンス作成部分を
var marker = get_original_marker(loc[0], loc[2].category, loc[2].title);
（locはparse_loc()の戻り値）
として、
get_original_markerにタイトルの引数を追加
get_original_marker(point, catID, title)
あとは前返答のように
return new GMarker(point, {icon:Icon, title:title})
とすればタイトルが追加されると思います。
返信
LWGM

2012/01/18 16:10

記事タイトルです。

教えていただいた通りで実現できました！！！

本当に助かりました。どうもありがとうございました。
返信
Rookie

2012/04/20 13:56

はじめまして。
Wordpressもサイト作成も初心者です。

お手すきのときに、お返事いただけるとありがたいです。

当サイトで紹介されている、LightweightGoogleMapsの修正を試してみたのですが、
固定ページで集約されるアイコンが、デフォルトにしかならなくて、悩んでいます。

カテゴリーIDが間違っているのかと思いましたが、
間違っていませんでした。

何か初歩的なミスをしているのでしょうか。

よろしくお願いいたします。
返信

コメントを残すコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.

locations.phpの修正

lw_googlemaps.phpの修正

シェア

関連

「[wp] Lightweight Google Maps カテゴリーごとにアイコンを変更する」への8件のフィードバック

コメントを残すコメントをキャンセル