ホ−ム » 基本サンプル » 地域図を利用してGoogle マップを表示

地域図を利用してGoogle マップを表示

実行結果

次の例では、地域図を利用してGoogle マップを表示します。
セレクトボックスから都道府県を選択し地域図を表示します。地域図をクリックすると、Google マップ上でクリックした市区町村の代表点緯度経度を中心点にします。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/search/AreaGoogleMap.html

ソースコードと解説

地域図を表示するには、ZDC.AreaMapクラスを利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<!-- ↓ここでGoogle Maps APIを任意にロードします -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,areamap.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map, smap;

    function loadMap() {
        var marker;
        /* Googleマップを表示 */
        var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(43.0620696, 141.3543371),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                scaleControlOptions: {
                    style: google.maps.ScaleControlStyle.DEFAULT
            }
        };
        map = new google.maps.Map(document.getElementById("ZMap"), myOptions);

        showAreaMap("01a");
    };

    /* 「地域図表示」都道府県選択時に動作 */
    function addAreaMap() {
        /* 再作成のために、地域図があれば消す */
        if (smap) {
            smap.remove();
        }

        showAreaMap(document.getElementById("todCode").value);
    };

    /* 地域図を表示 */
    function showAreaMap(todCode) {
        smap = new ZDC.AreaMap(
        {
            todCode: todCode,
            callback: showSearchMap,
            areaMap: document.getElementById("area")
        });
    };

    /* 地域図クリック時に動作 */
    var showSearchMap = function(rtn) {
        var  marker;

        /* Google Maps API用に測地系を世界測地系に変換 */
        var latLng = ZDC.tkyTowgs(rtn.latlon);
        var lat = latLng.lat;
        var lon = latLng.lon;

        /* 地域図をクリックした位置を取得してGoogleマップを移動 */
        map.panTo(new google.maps.LatLng(lat, lon));

        /* Googleマップ内の代表点にマーカーをつける */
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lon),
            map: map
        });
    };

//]]>
</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div id="area" style="top:330px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:540px; position:absolute;">
        <select name="todCode" id="todCode" onChange="addAreaMap();" >
            <option value="01a">北海道西部</option>
            <option value="01b">北海道東部</option>
            <option value="02">青森県</option>
            <option value="03">岩手県</option>
            <option value="04">宮城県</option>
            <option value="05">秋田県</option>
            <option value="06">山形県</option>
            <option value="07">福島県</option>
            <option value="08">茨城県</option>
            <option value="09">栃木県</option>
            <option value="10">群馬県</option>
            <option value="11">埼玉県</option>
            <option value="12">千葉県</option>
            <option value="13">東京都</option>
            <option value="14">神奈川県</option>
            <option value="15">新潟県</option>
            <option value="16">富山県</option>
            <option value="17">石川県</option>
            <option value="18">福井県</option>
            <option value="19">山梨県</option>
            <option value="20">長野県</option>
            <option value="21">岐阜県</option>
            <option value="22">静岡県</option>
            <option value="23">愛知県</option>
            <option value="24">三重県</option>
            <option value="25">滋賀県</option>
            <option value="26">京都府</option>
            <option value="27">大阪府</option>
            <option value="28">兵庫県</option>
            <option value="29">奈良県</option>
            <option value="30">和歌山県</option>
            <option value="31">鳥取県</option>
            <option value="32">島根県</option>
            <option value="33">岡山県</option>
            <option value="34">広島県</option>
            <option value="35">山口県</option>
            <option value="36">徳島県</option>
            <option value="37">香川県</option>
            <option value="38">愛媛県</option>
            <option value="39">高知県</option>
            <option value="40">福岡県</option>
            <option value="41">佐賀県</option>
            <option value="42">長崎県</option>
            <option value="43">熊本県</option>
            <option value="44">大分県</option>
            <option value="45">宮崎県</option>
            <option value="46">鹿児島県</option>
            <option value="47">沖縄県</option>
        </select>
    </div>
</body>
</html>