Wordpressでサイトを作ろうとしています。複数の店舗情報を投稿(post)で作りました。店舗情報は位置情報を持っており、この「投稿で作った各店舗情報」をTOPの固定ペ-ジに表示してあるグ-グルマップ上で複数マ-カ-表示しております。ここで質問させてください。店舗情報はカテゴリで別れており、そのカテゴリごとの表示にしたいのです(現在はどのカテゴリ-もいっしょくたになって表示されております)。トップペ-ジにあるカテゴリ-ごとのボタンを押すと、マップ上はそのカテゴリ-だけになるのが理想です。マ-カの形もカテゴリごとに変更したいです。プラグインを使用せず上記を実現できるコ-ドを教えて下さい。コメント欄に現状のコ-ドを書かせていただきます。ズバリご回答いただいた方に高ポイントを差し上げます。なにとぞよろしくお願いいたします。

(現状、カテゴリ-ごとのボタンもありません)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/07/29 14:22:55
  • 終了:2014/08/05 14:25:03
id:ykhpno1

現状のコ-ド(表示がおかしくなるので一部大文字にしてます)

<?php query_posts($query_string . "&showposts=100"); ?>
<div id="map" style="width: 800px; height: 800px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById( 'map' );
var myOptions = {
zoom: 15,
center: new google.maps.LatLng( 35.4155,139.4623 ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );
var marker = [];
var infowindow = [];
<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>
<?php while (have_posts()) : the_post(); ?>
marker[<?php echo $m++; ?>] = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png’,
position: new google.maps.LatLng( <?php echo post_custom("lat")?>,<?php echo post_custom("lon")?> ),
map: map,
title: '<?php the_title(); ?>'
});
infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({
content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
size: new google.maps.Size( 50, 30 )
});
google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() {
infowindow[<?php echo $i2++; ?>].open( map, marker[<?php echo $m2++; ?>] );
});
<?php endwhile; // End the loop. Whew. ?>
var markerCluster = new MarkerClusterer( map, marker );
});
</script>

回答(2件)

id:ykhpno1

質問文を編集しました。詳細はこちら

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322014/07/29 18:28:52

ポイント500pt

つけるとすると面倒ですね。「トップペ-ジにあるカテゴリーごとのボタンを押すと」という条件なのでPHPだけでは不可能で、javascriptとの連携が必要になります。(押すとカテゴリ別ページにJUMPしてそこにphpをおいておく、なら現状のコードを量産して対応できる)

プログラム動作の流れとしては下記のようになるかと思われます。

1.PHPで持っている店舗情報データ(位置、カテゴリなど)をjavascript側に全部渡す
サンプルコードにある<?php while (have_posts()) : the_post(); ?>あたりです。
ここをいきなりアイコン生成するのではなくJS側にデータを全て預ける形にします。

2.javascript側でデータ整形したあと初期表示をする。ユーザの行動を待つ。
new google.maps.Markerの処理部分をfunction化していつでも呼び出せるようにしておきます。

3.ユーザがカテゴリのボタンを押したら、JSに保存してあるデータと照合して、2で作ったfunctionを回して表示する


これをコードで書くと、とてつもない量になって大変です…^^;
WEB屋さんかシステム屋さんにお願いしたほうがいいかもしれませんが、お金がすごくかかりますので、そこまでして付ける機能かどうか考えてみてください。


質問者さんが現状コードを書いたのであれば、時間はかかりますが自作できるとおもいます。
どちらにしてもとても参考になるサイトが「無印良品」さんです。
http://www.muji.net/shop/
JSを覗いてみると詳しくコメントが書いてあるので、お手本になるとおもいますよ。
システム屋さんにお願いするとしても、こんなかんじで!と言えますし。

id:ykhpno1

ご回答いただきまして誠にありがとうございます!本当に困っておりまして回答がいただけただけでも大変嬉しいです。カテゴリ-ごとのボタンはあくまで例でありまして、他のアクションであっても要件が満足できれば問題ないのですがちょっと思いつかなくて・・。
また、現状のコ-ドはサンプルコ-ドからほぼコピペです。勉強を兼ねてこの問題に取り組もうとしておりますので外注は最後の手段かな、と。。教えていただいた無印良品さんのサイトをこれから見させていただきます。ご回答をいただき誠にありがとうございました。またご回答をいただけると嬉しいです!

2014/07/30 09:32:49
id:tukihatu No.2

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322014/07/30 11:27:41

ポイント500pt

>カテゴリ-ごとのボタンはあくまで例でありまして、他のアクションであっても要件が満足できれば問題ないのですがちょっと思いつかなくて・・。

とのことでしたので、一応遷移ありの作り方(押すとカテゴリ別ページにJUMPしてそこにphpをおいておく)を書いておきますね


まず前提として、特定のカテゴリ情報だけ表示する場合は、先頭のコードを下のようにします。

<?php query_posts($query_string . "&cat=1&showposts=100"); ?>

&catというのはカテゴリ番号のことです。
http://kirinblog.com/wordpress/wordpress-tips.html


TOPページにはボタンでカテゴリ別ページへのリンクを設置しておきます。
カテゴリ別ページには、現在のコードを改修したものをコピーして置いていきます。

index.php(トップページ)//query_posts($query_string . "&showposts=100");
/map/(カテゴリ別ページのフォルダ)
   1.php //query_posts($query_string . "&cat=1&showposts=100");
   2.php //query_posts($query_string . "&cat=2&showposts=100");
   …下に続く


こうしておけば、1.phpにjumpすればカテゴリ番号1だけのmapが表示され、2.phpならカテゴリ番号2だけのmapが表示されます。
カテゴリが増えるごとに手動でページを増やす手間がありますが、回答1のような大規模な開発が必要ないので簡単だと思います。参考までに。


ちなみにカテゴリごとにマーカーを変えたい場合は、ページごとに現状コードのicon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png’,のURLを変更してやればOKです。

id:ykhpno1

!!

ありがとうございます!
さっそく今晩にもやってみます。どうなったか明日夜には追記させていただきます。

2014/07/30 19:54:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません