WordPressのカテゴリーをエリアにしてGoogleMapと連動させる方法

カテゴリー: Tips・wordpress.
[`evernote` not found]
Delicious にシェア
Share on Tumblr

Google Maps Marker in TokyoGoogle Maps Marker in Tokyo / heiwa4126

とある案件で作る事があったので自分的にメモ。

まず、Wordpress側の準備として、東京、大阪等のエリアをカテゴリに登録。

カテゴリの説明に、住所とzoomの値をカンマで入れる。ex. 東京都千代田区,13

テンプレート側で下記の用に記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<?php
$place = category_description(); //カテゴリ説明を代入
$place = str_replace('<p>', '', $place);
$place = str_replace('</p>', '', $place); //余計なpタグを消去
$place = split(",", $place); //カテゴリ説明を、分解して配列へ
$p = urlencode($place[0]);
$xml = simplexml_load_file("http://www.geocoding.jp/api/?q=$p");

echo '<script type="text/javascript">
    var infowindow;
    var map;
   
    function initialize() {
    var myLatlng = new google.maps.LatLng('.$xml->coordinate->lat.', '.$xml->coordinate->lng.');
    var myOptions = {
        zoom: '.$place[1].',
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</script>';
}
?>
<body onload="initialize()">
    <div id="map_canvas" style="width: 400px; height: 200px"></div>
</body>

これをcategory.phpに貼り付けると、カテゴリページにカテゴリ説明に入力した住所の地図が表示されます。
地図を使う系のサービスに使えそうです。

コメントを残す