ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

（追記）検索機能をつけた「その２」を追加しました。

APIを利用したJavascriptプログラムにて、Googleマップで使用できる緯度、経度を取得し、入力フィールドに表示するプログラムです。（まずはサンプル）

なお今回は「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースをベースに作らせていただきました。

手順

１．まずこちらで、Googleマップ用APIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．headタグ内に以下のスクリプトを記述してください。

※（APIキー）のところは、１．で取得したAPIキーを入れてください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&amp;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>

３．次に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を設定してください。

これで、マーカーをドラッグ＆ドロップで動かすたびにその座標を取得できます。

また、マップをつかんで移動したり、コントローラでズームをするたびに「中心座標」や「ズーム」値を取得します。

サンプル [あたらしいウィンドウで開く]

今回参考にさせていただいたサイト

• オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」
• Google Maps API Version 2アップグレードガイド