WordPressの検索結果をGoogleMapに表示する

地図上に全てのマーカを一度に表示すると見にくくなります。

そこで10件づつページャに沿って表示したい。

このような場合は?

次から構成されていますサイトをもとのいくつかのポイントについて紹介します。

こちらは『札幌市内医療機関検索』の結果を地図に表示したものです。

検索の結果は全部で1241件あります。

全てのマーカを一度に表示すると見にくくなりますので10件づつページャに沿って表示しています。

このサイトでは検索結果を通常のリストか地図を選択できるようにしてあります。
ここでの「10件づつ」は管理ツールの表示設定の「1ページに表示する最大投稿数」です。
ページャのプラグインを使用する場合も同様でその「1ページに表示する最大投稿数」になります。

ページごとに地図を表示するためには、Googlemap apiを利用するJavascript関数においてページごとのデータ(緯度経度、インフォメーション)でJavaScriptコードを生成します。

始めに検索結果の件数を取得し、ページ数を求めます。
PHPコードは次のようになります。


$count = $wp_query->found_posts;//カウント数
	
	//全ページ数の計算 start -------------------------
	$disp_count = $posts_per_page;//設定表示件数 → $posts_per_page はプラグイン(wp_pagenavi)で設定の変数
	$loop_count = 0;
	$cal_count0 = floor($count / $disp_count);
	$cal_count1 = $count % $disp_count;
	
	if ($paged == 0) {//1ページの場合0ページを返すため1に変更する
		$paged = 1;
	}

	if ($cal_count0 == 0) {
		$t_page = 1;
	}
	else {
		if ($cal_count1 == 0) {
			$t_page = $cal_count0;
		}
		else {
			$t_page = $cal_count0 + 1;
		}
	}
	//全ページ数の計算 end -----------------------------


実際には、最終ページの件数が重要になります。
PHPコードは次のようになります。


// 検索データ数分のアイコンと噴出しデータを作成
$js .= <<< HERE
	{
		lat : $lat,
		lng : $lng,
		location_name : '{$post_custom['location_name'][0]}',
		location_url : '{$post_custom['location_url'][0]}',
		post_url : '{$post_url}',
		icon : '$icon',
	}
HERE;

				// 繰り返しの最後でなければ、場所の情報の後に区切りの「,」を追加する
				//最後のページの処理
				if ($t_page == $paged){
					if (($loop_count != $cal_count1) and ($cal_count1 != 0)){
						$js .= ",\n ";
					}
					elseif (($cal_count1 == 0) and ($loop_count < $disp_count)) {
						$js .= ",\n ";
					}
				}
				else {
					if ($loop_count != $disp_count) {
						$js .= ",\n ";
					}
				}

Leave a Reply

will not be published

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>