管理人が運営している、地域情報系のブログがあります。

テレビ・ネット・雑誌の情報を見て、面白そう！とか美味しそう！とかいうスポットやお店に行くという流れで、記事を書くんですが、全部を記事にできるわけではない。
それに、あの時のお店を・・・と考えても思い出せない時ってあります。

そこで、メモした情報をなんとかブログにのせて、外出先でも見られる仕組みができないか考えていたんです。

そこで作った仕組みがこれ。メモ代わりの記事を書き、地図上でほかの記事とは違う表示（黄色のピンで表示をする）というものです。

カスタム投稿のスポット情報記事を地図上に表示

カスタム投稿記事を使う

こういう時は、カスタム投稿を使うというのがワードプレスの基本だと思います。
通常の「投稿」「固定ページ」に第三の投稿形式で、記事をアップできるという便利機能です。

参考：投稿タイプ – WordPress Codex 日本語版

「ワードプレスの教科書１、２」「Amazon.co.jp： 基礎からのWordPress (BASIC LESSON For Web Engineers): 高橋 のり: 本」どちらも、管理人がワードプレスを扱う時に見るバイブルですが、
functions.phpに書きこむやり方は一つだけ。あとは、プラグイン「WordPress › Custom Post Type UI << WordPress Plugins」を使っていますね。

・・・できるだけ、プラグインは入れたくなかったんですが、
これは入れて正解でした。。。設定がすごく簡単。（基礎からのワードプレスの設定を参考にしました。）

ポイントは、設定項目の「Has Archive ?」だと思います。
アーカイブページなどで一覧表示をさせたいならtrueにとのことで、管理人もtrueで設定しています。

地図表示をする

基本的には、この記事を元に

GoogleマップのMarkerClustererをフォトログに導入してみた

上記リンクのプログラムを利用させていただいています。ありがとうございます。
っで、ちょこっと変えた部分が２つ

get_posts()のパラメーターを変える

get_posts()で記事データを呼んでいますが、
この関数のデフォルト設定で読むのは投稿記事のみです。

1
2
3
4
5
6
$args = array(
'posts_per_page' =&amp;gt; -1,
'meta_key' =&amp;gt; 'lat,lng',
'post_type' =&amp;gt; array('post','spot')
);
$photos = get_posts( $args);?&amp;gt;

そこで、get_posts()の関数部分をこのように変えて、投稿記事、カスタム投稿記事（spotという名前）を両方呼んでくる設定にしました。参考（get_posts()で複数の投稿タイプが混在した記事一覧を作る | NeGiMeMo.net）

ピンの色を変える

あとはピンの色を変える設定です。
もともと、上記参考記事ではピンの色を変える設定がありますので、google mapsのjavascriptのアイコン部分を

1
2
3
4
5
6
7
8
9
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/&amp;lt;?php
if($post-&amp;gt;ID == $photo-&amp;gt;ID):
echo &quot;red&quot;;
elseif($photo-&amp;gt;post_type == post):
echo &quot;blue&quot;;
else:
echo &quot;ylw&quot;;
endif;
?&amp;gt;-pushpin.png',

と書き換えました。
元プログラムが素晴らしいので、あとは設定をちょっといじるだけ。
本当に助かりました。ありがとうございます。

追記　2014/05/28

最初に作った時は、一回のget_posts()ですべての記事を呼んできてループさせるという方法で作りました。

しかし、カスタム投稿記事と通常の投稿記事を同列に扱うのはわりと大変ですよね。そこで無理をせずに、２回ループさせるほうが、簡単かもしれないし、応用が効くかもしれないと思うようになりました。

つまり、最初は投稿記事のみ呼んできてマーカーをループさせる。次に、カスタム投稿記事を呼んできてループさせるといったやり方です。

具体的には、以下のような感じです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
&amp;lt;?php if ( $latlng = get_post_meta( $post-&amp;gt;ID, 'lat,lng', true ) ) :?&amp;gt;
&amp;lt;div id=&quot;map&quot; style=&quot;margin-left: 5px; width: &amp;lt;?php echo (int)$content_width; ?&amp;gt;px; height: &amp;lt;?php echo ceil( (int)$content_width * 2 / 3 ); ?&amp;gt;px;&quot;&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById( 'map' );
var myOptions = {
zoom: 11,
center: new google.maps.LatLng( &amp;lt;?php echo esc_html( $latlng ); ?&amp;gt; ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );
 
var marker = [];
var infowindow = [];
//▼投稿記事を呼んできてループさせる
&amp;lt;?php
$photos = get_posts( 'posts_per_page=-1&amp;amp;meta_key=lat,lng' );
$cnt = 0; foreach ( $photos as $photo ) : $latlng = get_post_meta( $photo-&amp;gt;ID, 'lat,lng', true ); ?&amp;gt;          marker[&amp;lt;?php echo $cnt; ?&amp;gt;] = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/&amp;lt;?php echo $post-&amp;gt;ID == $photo-&amp;gt;ID ? 'red' : blue; ?&amp;gt;-pushpin.png',            position: new google.maps.LatLng( &amp;lt;?php echo esc_html( $latlng ); ?&amp;gt; ),
map: map,
title: '&amp;lt;?php echo apply_filters( 'the_title', $photo-&amp;gt;post_title ); ?&amp;gt;'
});
infowindow[&amp;lt;?php echo $cnt; ?&amp;gt;] = new google.maps.InfoWindow({
content: '&amp;lt;a href=&quot;&amp;lt;?php echo get_permalink( $photo-&amp;gt;ID ); ?&amp;gt;&quot;&amp;gt;&amp;lt;?php echo apply_filters( 'the_title', $photo-&amp;gt;post_title ); ?&amp;gt;&amp;lt;/a&amp;gt;',            size: new google.maps.Size( 50, 30 )
});
google.maps.event.addListener( marker[&amp;lt;?php echo $cnt; ?&amp;gt;], 'click', function() {
infowindow[&amp;lt;?php echo $cnt; ?&amp;gt;].open( map, marker[&amp;lt;?php echo $cnt; ?&amp;gt;] );
});
&amp;lt;?php $cnt++; endforeach; ?&amp;gt;
//▲投稿記事を呼んできてループさせる
//▼カスタム投稿記事を呼んできてループさせる
&amp;lt;?php
$photos = get_posts( 'posts_per_page=-1&amp;amp;meta_key=lat,lng&amp;amp;post_type=（あなたのカスタム投稿の名前）' );
foreach ( $photos as $photo ) : $latlng = get_post_meta( $photo-&amp;gt;ID, 'lat,lng', true ); ?&amp;gt;          marker[&amp;lt;?php echo $cnt; ?&amp;gt;] = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/ylw-pushpin.png',            position: new google.maps.LatLng( &amp;lt;?php echo esc_html( $latlng ); ?&amp;gt; ),
map: map,
title: '&amp;lt;?php echo apply_filters( 'the_title', $photo-&amp;gt;post_title ); ?&amp;gt;'
});
infowindow[&amp;lt;?php echo $cnt; ?&amp;gt;] = new google.maps.InfoWindow({
content: '&amp;lt;a href=&quot;&amp;lt;?php echo get_permalink( $photo-&amp;gt;ID ); ?&amp;gt;&quot;&amp;gt;&amp;lt;?php echo apply_filters( 'the_title', $photo-&amp;gt;post_title ); ?&amp;gt;&amp;lt;/a&amp;gt;',            size: new google.maps.Size( 50, 30 )
});
google.maps.event.addListener( marker[&amp;lt;?php echo $cnt; ?&amp;gt;], 'click', function() {
infowindow[&amp;lt;?php echo $cnt; ?&amp;gt;].open( map, marker[&amp;lt;?php echo $cnt; ?&amp;gt;] );
});
&amp;lt;?php $cnt++; endforeach; ?&amp;gt;
//▲カスタム投稿記事を呼んできてループさせる
var markerCluster = new MarkerClusterer( map, marker );
});
&amp;lt;/script&amp;gt;
&amp;lt;?php endif; ?&amp;gt;
広告