個別投稿ページでの地図表示

店舗の詳細ページを個別の投稿（SINGLE）でつくって、ブランドごとにカテゴリ分けなどして、カテゴリごとに背景を変えるなどしていた。

詳細ページに地図を載っけようと思ったので会社概要からとってきて貼り付け。

と、そこまでは良かったが、各店舗ごとに地図が変わるのは当たり前で、Google Mapスクリプトに与える座標をそれぞれの店舗用のものにしなければいけない。

JSON何とかとか、色々やってみたが最終的にはとても簡単な、行ってしまえば1行で実現できた。

実際には各店舗ページのスラッグで振り分けるので複数行になるが原理的には1行でOK。
ページごとに変数「$hoge」に与える座標を変更しているだけ。


<?php echo $hoge; ?>の部分に座標が入る。
もとは当然というかまんま数値が入っていた。
（このスクリプトの参考ページはURLを控えていませんでした。あしからず。）
はじめのうち、ただ単に「$hoge」とか「'$hoge'」とかやってみたが、変数の中身が出てこなかった。
結構探してみたが解決策は見つからず、<script type='text/javascript'>のなかで<?php ・・・?>が動くのであれば、これも行けるのでは。と試に実行。


みごとに座標がはまりました。


ちなみにJSONとやらを介したやりかた、


<?php $hoge = '座標を入れる'; ?> <script type="text/javascript"> var hoge = <?php echo json_encode($hoge); ?>; console.log(hoge); // 座標を入れる </script>


http://qiita.com/39_isao/items/09946484933b83060f10


で、<?php echo json_encode($hoge); ?>としていたが、これだと座標の前後にダブルクォーテーションがついてしまって使えなかった





************************************************


<?php if(is_single('shop1')): ?><?php $hoge = '35.682579, 139.752775'; ?>

<?php elseif(is_single('shop2')): ?><?php $hoge = '35.689838, 139.700331'; ?>

<?php endif; ?>

<script type='text/javascript'>

var mapCanvas;
function intialize() {
//Create a map
mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
mapCanvas.setCenter(new google.maps.LatLng(<?php echo $hoge; ?>));
mapCanvas.setZoom(17);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

//marker1 : Tokyo, Japan
var marker = new google.maps.Marker({
position : new google.maps.LatLng(<?php echo $hoge; ?>),
map: mapCanvas
});
}
google.maps.event.addDomListener(window, "load", intialize);
</script>





このやりかたで、PHPの変数をJSで使えることが分かった。
しかもすごく簡単。
いろいろ応用できれば面白そう。