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

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にカテゴリーのタグを追加する。

<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インスタンス作成部分を変更する。

デフォルトソース：

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

変更後ソース：

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