(追記)検索機能をつけた「その2」を追加しました。
APIを利用したJavascriptプログラムにて、Googleマップで使用できる緯度、経度を取得し、入力フィールドに表示するプログラムです。(まずはサンプル)
なお今回は「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースをベースに作らせていただきました。
手順
1.まずこちらで、Googleマップ用APIキーを取得してください。
Google MAPS API に登録する (Google Maps API)
2.headタグ内に以下のスクリプトを記述してください。
※(APIキー)のところは、1.で取得したAPIキーを入れてください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.7019079769257; //緯度初期値
var lng = 135.49497485160828; //経度初期値
var zoom = 7; //ズーム初期値var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
var map = new GMap2(document.getElementById(mapname));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
// ドラッグ可能なマーカー
var mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById("latitude").value = p.lat();
document.getElementById("longitude").value = p.lng();
});
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById("latitude").value = mk.getLatLng().lat();
document.getElementById("longitude").value = mk.getLatLng().lng();
// ズーム取得(イベント時)
GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
document.getElementById("zoom").value = newZoomLevel;
});
// ズーム初期設定
zoom=map.getZoom();
document.getElementById("zoom").value = zoom;
// 中心座標を取得(イベント時)
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("center_latitude").value = center.y;
document.getElementById("center_longitude").value = center.x;
});
// 中心座標初期設定
document.getElementById("center_latitude").value = lat;
document.getElementById("center_longitude").value = lng;
// コントロール(小)表示
map.addControl(new GSmallMapControl);
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
3.次にbody内に以下を記述してください
<div id="map" style="width:500px;height:500px;"></div>
<div>
<label for="latitude">マーカー緯度</label>
<input type="text" id="latitude" name="latitude" size="20" />
<label for="longitude">マーカー経度</label>
<input type="text" id="longitude" name="longitude" size="20" />
</div>
<div>
<label for="center_latitude">中心緯度</label>
<input type="text" id="center_latitude" name="center_latitude" size="20" />
<label for="center_longitude">中心経度</label>
<input type="text" id="center_longitude" name="center_longitude" size="20" />
</div>
<div>
<label for="longitude">ズーム</label>
<input type="text" id="zoom" name="zoom" size="2" />
</div>
id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。
これで、マーカーをドラッグ&ドロップで動かすたびにその座標を取得できます。
また、マップをつかんで移動したり、コントローラでズームをするたびに「中心座標」や「ズーム」値を取得します。