とある案件で作る事があったので自分的にメモ。
まず、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に貼り付けると、カテゴリページにカテゴリ説明に入力した住所の地図が表示されます。
地図を使う系のサービスに使えそうです。