OpenPNEのコミュニティのGoogleマップを地図上から設置する。
現状（2.4系）のOpenPNEには、コミュニティにgoogle mapを貼り付ける機能があるが、その場所を指定するためには、緯度、経度、拡大度を自分で調べて打ち込むか、もしくはあらかじめMySQLで展開している都道府県の県庁所在地でしか場所を指定する方法がない。
そこで、その場所を指定するボックスに、小さなgoogle mapを設置し、その地図上をクリックすると、勝手に経度、緯度、拡大度がフォーム内に書き込まれるスクリプトを書いてみた。
c_edit.tplに以下のJavaScriptのコードを入れる。
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=({$smarty.const.GOOGLE_MAPS_API_KEY})" type="text/javascript"></script>
<script type="text/javascript">
<!--
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(({$c_commu.map_latitude}), ({$c_commu.map_longitude})), ({$c_commu.map_zoom}));
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
document.forms[0].map_latitude.value = point.y;
document.forms[0].map_longitude.value = point.x;
}
});
GEvent.bind(map, 'zoomend', this, function() {
document.forms[0].map_zoom.value = map.getZoom();
});
}
}
//-->
</script>
<body onLoad="load()" onUnload="GUnload()">その上で、手動設定の上あたりに、
<div id="map" style="width: 400px; height: 200px"></div>
とでも書いておく。これで、そこに表示されるマップをクリックすると、経度、緯度を調べてくれる。また、ズームレベルも記憶してくれる。
ただ、問題点。
- マップをはじめて選ぶときは、世界地図がズームレベル0で出てくる。（たぶん、JSの部分を条件分岐？か何かで書き込めばいいのだろうけど、分からない）
- また、経度、緯度のフォームに直接数字を打ち込んでも、その上のマップが動くわけではないので、事実上経度、緯度から位置を指定することは不可能。
たぶん、ほかにも色々とあるかもしれないが、動作することは動作する。
追記（11月6日）
上記のコードを修正。
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=({$smarty.const.GOOGLE_MAPS_API_KEY})" type="text/javascript"></script>
<script type="text/javascript">
<!--
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var lat = ({$c_commu.map_latitude});
var lng = ({$c_commu.map_longitude});
var zoom = ({$c_commu.map_zoom});
if (zoom == 0) {
map.setCenter(new GLatLng(35.061477, 135.032959), 8);
} else {
map.setCenter(new GLatLng(lat, lng), zoom);
}
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
document.forms[0].map_latitude.value = point.y;
document.forms[0].map_longitude.value = point.x;
}
});
GEvent.bind(map, 'zoomend', this, function() {
document.forms[0].map_zoom.value = map.getZoom();
});
}
}
//-->
</script>マップをはじめて選ぶときは、兵庫県の地図が出るように修正しました。もし、初期状態でほかの地図を出したいのなら、
map.setCenter(new GLatLng(35.061477, 135.032959), 8);
に、その場所の緯度、経度、拡大率を入れるとOKです。
追記（12月28日）
meさんのコメントを受け、手動設定って何だっけ？と考え直したところ、はじめのデフォルトのコードが手元になかった。なんで、今動かしているSNSのコードをそのまま貼り付けておくので、参考にしてください。
({*********})
({if $smarty.const.OPENPNE_USE_COMMU_MAP})
<tr>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
<td class="bg_05" align="center" valign="middle">
<div class="padding_s">
地 図
</div>
</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
<td class="bg_02" align="left" valign="middle">
<div class="padding_s">
<input name="is_display_map" type="radio" class="no_bg" value="1"({if $c_commu.is_display_map}) checked="checked"({/if})>表示する<br>
<input name="is_display_map" type="radio" class="no_bg" value="0"({if !$c_commu.is_display_map}) checked="checked"({/if})>表示しない
</div>
</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
</tr>
({*********})
<tr>
<td style="height:1px;" class="bg_01" colspan="5"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
</tr>
({*********})
<tr>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
<td class="bg_05" align="center" valign="middle">
<div class="padding_s">
地図情報の設定
</div>
</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
<td class="bg_02" align="left" valign="middle">
<div class="padding_s">
<div id="map" style="width: 400px; height: 200px"></div>
緯度：<input name="map_latitude" id="map_latitude" type="text" size="14" value="({$c_commu.map_latitude})">
経度：<input name="map_longitude" id="map_longitude" type="text" size="14" value="({$c_commu.map_longitude})">
拡大率：<input name="map_zoom" type="text" size="4" value="({$c_commu.map_zoom})" maxlength="2">
</div>
</td>
<td class="bg_01" align="center"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
</tr>
({*********})
