Google Maps APIの読み込みをカテゴリーごとにCSSでタブ風に切り替える方法

2014-08-01［WordPress］

当サイトではアフィリエイト広告を利用しています。

ランチブログなどでトップページにGoogle Mapを用意してマッピングするようなサイトを運営している場合、カテゴリー（ラーメン、カレー、とんかつなど）ごとにタブで切り替えたいというニーズはあると思います。
Google Maps APIの読み込みをカテゴリーごとにCSSでタブ風に切り替える方法
こが簡単なようで何気に難しいかったので、自分が実際にできた方法をご紹介したいと思います。
ちなみにタブ切り替えはjQueryを使うことが多いのですが、Google Maps APIとの相性が悪かったためCSSでの実装にしています。

実はこの内容は自分が別で運営している「WordPressとプラグインを使ってお店紹介サイトを作る方法」に問い合わせで来たもので、Google Maps APIの基本的なところはこちらの記事を参考にしてもらえるといいかなと（重要なところは書きますが…）

→Google Maps API | WordPressとプラグインを使ってお店紹介サイトを作る方法

＜目次＞

CSSを使ったタブ切り替えの設定
Google Maps APIの設定
マーカーの変更方法
実装ページ（DEMO)

CSSを使ったタブ切り替えの設定

この後でGoogle Maps APIの設定もありますが、まずはベースとなる箱を作っていきます。できる人なら「一緒に」でもいいですけど、マイルストーンをしっかりと置いておいたほうがバグが起きた時の戻る場所ができるので順番にやっていくことをお勧めします。

ベースとなるHTMLはこちら
若干「div」が多いですけど、切り替えのため仕方ないと思ってください。

[php]<div id="tabmenu">
<div id="tab">
<a href="#tab1">カレー</a>
<a href="#tab2">ラーメン</a>
<a href="#tab3">全部</a>
</div>
<div id="tab_contents">
<div class="box">
<div class="inner" id="tab1" name="tab1">
カレー
</div>
</div>

</div>[/php]

これに以下のようなCSSを設定すればOK

[css]#tabmenu{
padding:0px;
margin:0px;
color:#333;
font-size: 14px;
width:600px;
position:relative;
}

#tabmenu div#tab{
position: absolute;
top:0px;
left:0px;
}

#tabmenu div#tab a{
margin: 0 10px 0 0;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 120px;
display: block;
text-decoration:none;
color:#333;
background:#eee;
border-radius:10px;
}

#tabmenu div#tab a:hover{
background:#000;
color:#fff;
}

div#tab_contents{
width:600px;
overflow: hidden;
clear:both;
}
div#tab_contents div.box{
width:1800px;
padding:0px;
margin:0px;
}
div#tab_contents div.box div.inner{
float: left;
width:600px;
list-style-type:none;
margin:50px 0px 0px 0px;
background:#e2e2e2;
}[/css]

この時点での完成形がこちら

デモ１

※デモページは見た目の関係で「div#tab_contents div.box div.inner」に「height:500px;」を追加しています。

このソースでポイントになってくるのは「div#tab_contents div.box」に設定している［width］の数値でこれは「#tabmenu」「div#tab_contents div.box」「div#tab_contents div.box div.inner」に設定している［width］のタブの数だけ掛け算した数値になります。

もう一度書きますが、ここでCSSを使ったタブ切り替えを完全にフィックスさせておいてください。基本的には上記のソースで大丈夫だと思いますが、他のHTMLやCSSの関係でうまく表示できない場合は適時調整をしてください。

＜参考サイト＞
タブ切り替えについては、以下のサイトを参考（というかほぼそのまま）にさせていただきました。ありがとうございます。
→CSSのみで簡単にタブ切り替えを作成する方法

Google Maps APIの設定

続いてGoogle Maps APIの設定ですが、各タブの中「<div class=”inner” id=”tab1” name=”tab1“>～～</div>」にそれぞれ設定する形になります。この基本的な設定方法はGoogle Maps API | WordPressとプラグインを使ってお店紹介サイトを作る方法を参照してください。

※「tab1」は各タブごとで数値が変わっています。

参照元では「不要なカテゴリーを排除する」となっていますが、今回は特定のカテゴリーだけをピックアップすることになるため、WordPressのループの頭につける「query_posts」ではカテゴリーのIDを指定をします。

例）カレーのカテゴリーIDが「5」だった場合

[php]<?php if ( have_posts() ) : query_posts(‘cat=5&showposts=100’); ?>
ここに記事のループ
<?php endif; ?>[/php]

カテゴリーIDの確認の方法はWordPressの［ダッシュボード］→［投稿］→［カテゴリー］に移動し、IDを確認したいカテゴリーをマウスオーバーした時に、ブラウザのフッターに表示されるアドレスを見ればわかります。

また、ひとつのページにGoogle Maps APIを複数設置する場合、getElementByIdのIDが重複すると思ったような表示がされないので、IDをそれぞれユニークなものに変更する必要があります。

[php]
<div class="box">
<div id="map_curry" style="width: 600px; height: 620px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window, ‘load’, function() {
var mapdiv = document.getElementById( ‘map_curry’ );
以下省略
</script></div>
<div class="box">
<div id="map_ramen" style="width: 600px; height: 620px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window, ‘load’, function() {
var mapdiv = document.getElementById( ‘map_ramen’ );
以下省略
</script></div>
<div class="box">
<div id="map_all" style="width: 600px; height: 620px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window, ‘load’, function() {
var mapdiv = document.getElementById( ‘map_all’ );
以下省略
</script></div>
[/php]

Google Maps APIの中身をガッツリ省略していますが「divのid名」と「getElementByIdの名称」を揃えるのが重要になります。

ここはWordPressのループも絡んでくるところなので、少しナーバスになるかもしれませんが、できればページ数の少ない時にチェックするのが望ましいですね。それが難しい場合流れに逆らうことになりますけど一旦タブ切り替えを外して単体で動作するかをチェックしてからもありだと思います。

この辺の切り分けはバグが出た状況に応じて対応することになりますね。

マーカーの変更方法

ラストはマーカーの変更方法。カテゴリーごとMAPを変えるのであればマーカーもそれぞれオリジナルの物があったほうがわかりやすいと思います。

テスト用に用意したマーカーはこの2つ
　

これを自分のサイトの任意のところにアップロードして、そのURLを確認します。
テスト用にはここにアップロードしてあります。
・https://blog.junkword.net/img/curry.png（カレー用マーカー）
・https://blog.junkword.net/img/ramen.png（ラーメン用マーカー）

書き換えるのはGoogle Maps APIの中にあるこの部分

[php]icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png’,[/php]

ここを先程アップロードしたそれぞれアイコンのURLと入れ替えればOK

[php]icon: ‘https://blog.junkword.net/img/curry.png’,
もしくは
icon: ‘https://blog.junkword.net/img/ramen.png’,[/php]

＜全部を出したい場合＞
上記の方法は完全にカテゴリーを切った時には使えますが、全部を出した上でアイコンを変えることには対応していません。対応させるには以下のような記述を入れればOK

WordPressのループの中にこれを書き

[php]<?php
$cat = get_the_category();
$catslug = $cat[0]->slug;
?>[/php]

アイコンのところにはこれを書きます

[php]<?php bloginfo(‘stylesheet_directory’); ?>/images/<?php echo $catslug; ?>.png[/php]

＜簡単な説明＞
最初のphpで、ループ内（＝ひと記事分）のカテゴリースラッグ（＝URL）を取得して「$catslug」に代入しておきます。そして画像を表示させる部分でカテゴリースラッグを吐き出すことで、カテゴリーにあった画像を表示させるようにしています。

＜注意＞
上記の場合、画像はテーマのimagesフォルダに入れることになります。もし違う場所に入れたほうが都合がいい場合は適時変更してください（ドメイン直下の「imageフォルダ」に入れたい場合など）。
また、アップロードする画像名はカテゴリーのスラッグ（URL）と同じにする必要があります。