Wordpressでｻｲﾄを作ろうとしています｡複数の店舗情報を投稿(post)で作りました｡店舗情報は位置情報を持っており､この｢投稿で作った各店舗情報｣をTOPの固定ﾍﾟ?ｼﾞ…

Wordpressでｻｲﾄを作ろうとしています｡複数の店舗情報を投稿(post)で作りました｡店舗情報は位置情報を持っており､この｢投稿で作った各店舗情報｣をTOPの固定ﾍﾟ?ｼﾞに表示してあるｸﾞ?ｸﾞﾙﾏｯﾌﾟ上で複数ﾏ?ｶ?表示しております｡ここで質問させてください｡店舗情報はｶﾃｺﾞﾘで別れており､そのｶﾃｺﾞﾘごとの表示にしたいのです(現在はどのｶﾃｺﾞﾘ?もいっしょくたになって表示されております)｡ﾄｯﾌﾟﾍﾟ?ｼﾞにあるｶﾃｺﾞﾘ?ごとのﾎﾞﾀﾝを押すと､ﾏｯﾌﾟ上はそのｶﾃｺﾞﾘ?だけになるのが理想です｡ﾏ?ｶの形もｶﾃｺﾞﾘごとに変更したいです｡ﾌﾟﾗｸﾞｲﾝを使用せず上記を実現できるｺ?ﾄﾞを教えて下さい｡ｺﾒﾝﾄ欄に現状のｺ?ﾄﾞを書かせていただきます｡ｽﾞﾊﾞﾘご回答いただいた方に高ﾎﾟｲﾝﾄを差し上げます｡なにとぞよろしくお願いいたします｡
(現状､ｶﾃｺﾞﾘ?ごとのﾎﾞﾀﾝもありません)

現状のｺ?ﾄﾞ(表示がおかしくなるので一部大文字にしてます)

＜?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＞

つけるとすると面倒ですね｡｢ﾄｯﾌﾟﾍﾟ?ｼﾞにあるｶﾃｺﾞﾘｰごとのﾎﾞﾀﾝを押すと｣という条件なので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を覗いてみると詳しくｺﾒﾝﾄが書いてあるので､お手本になるとおもいますよ｡
ｼｽﾃﾑ屋さんにお願いするとしても､こんなかんじで！と言えますし｡

>ｶﾃｺﾞﾘ?ごとのﾎﾞﾀﾝはあくまで例でありまして､他のｱｸｼｮﾝであっても要件が満足できれば問題ないのですがちょっと思いつかなくて･･｡

とのことでしたので､一応遷移ありの作り方(押すとｶﾃｺﾞﾘ別ﾍﾟｰｼﾞに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です｡