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

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

前回では、検索機能がなかったので追加しました。（まずはサンプル）

本来であれば

map.addControl(new google.maps.LocalSearch());

を追加することにより検索フォームを追加できるんですが、「Google AJAX Search APIキー」を取る必要があるし、中心座標はついてくるけど、マーカーが付いてこない。もちろんやり方はあるでしょうが、いまいちわからなかったので、こちらのサイトを参考に検索フォームを設置しました。

AjaxTowerさん「住所から座標を取得」

ソースのベースは前回同様「オレンジ工房 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.6862971; //緯度初期値
var lng = 135.5196609; //経度初期値
var zoom = 7;   //ズーム初期値
var geocoder;
var map;
var mk;

var set_map = function () {

    if (GBrowserIsCompatible()) {
   
        // マップ表示
        map = new GMap2(document.getElementById(mapname));
        var point = new GLatLng(lat, lng);
        map.setCenter(point, zoom);
        geocoder = new GClientGeocoder();
       
        // コントロール（小）表示
        map.addControl(new GSmallMapControl);
       
        // ドラッグ可能なマーカー
        mk = new GMarker(point, {draggable:true});
       
        // ドロップ時に緯度経度取得
        GEvent.addListener(mk,"dragend", function() {
            var p = mk.getLatLng();
            document.getElementById("latitude").innerHTML = p.lat();
            document.getElementById("longitude").innerHTML = p.lng();
        });
       
        // マップにマーカーを表示
        map.addOverlay(mk);
        document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
        document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
       
        // ズーム取得（イベント時）
        GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
            document.getElementById("zoom").innerHTML = newZoomLevel;
        });
       
        // ズーム初期設定
        zoom=map.getZoom();
        document.getElementById("zoom").innerHTML = zoom;
       
        // 中心座標を取得（イベント時）
        GEvent.addListener(map, "moveend", function() {
            var center = map.getCenter();
            document.getElementById("center_latitude").innerHTML = center.y;
            document.getElementById("center_longitude").innerHTML = center.x;
           
        });
       
        // 中心座標初期設定
        document.getElementById("center_latitude").innerHTML = lat;
        document.getElementById("center_longitude").innerHTML = lng;
       
    }
}

//住所を取得する
function moveAddress(){
    var address = document.getElementById("search_word").value;
    geocoder.getLatLng(address, moveTo);
}

function moveTo(latlng){
    if (latlng){
        map.setCenter(latlng, zoom);
        mk.setPoint(latlng);
        document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
        document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
    }else{
        alert("住所から緯度経度に変換できません");
    }
}
// ONLOADイベントで呼び出し
window.onload   = set_map;
window.onunload = GUnload();
//]]>
</script>

 ※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。

３．次にbody内に以下を記述してください

<div class"search">
    <p>住所から検索：<input type="text" name="search_word" id="search_word" value="" />
    <input type="button" onclick="moveAddress()" value="検索" /></p>
</div>
<div id="map" style="width:500px; height:500px;"></div>
<table>
    <caption>パラメータ1</caption>
    <tr>
        <th>マーカー緯度</th>
        <td id="latitude" name="latitude"></td>
    </tr>
    <tr>
        <th>マーカー経度</th>
        <td id="longitude" name="longitude"></td>
    </tr>
    <tr>
        <th>中心緯度</th>
        <td id="center_latitude" name="center_latitude"></td>
    </tr>
    <tr>
        <th>中心経度</th>
        <td id="center_longitude" name="center_longitude"></td>
    </tr>
    <tr>
        <th>ズーム</th>
        <td id="zoom" name="zoom"></td>
    </tr>
</table>

id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。

サンプル [新しいウィンドウで開く]

※サンプルでは少しスタイルをつけています。

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

• AjaxTower：該当記事「住所から座標を取得」
• オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」