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

路線図を利用してGoogle マップを表示

実行結果

次の例では、路線図を利用してGoogle マップを表示します。
路線図をクリックすると、クリックした駅の緯度経度をGoogle マップ上の中心点にします。

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

ソースコードと解説

路線図を表示するには、ZDC.RailwayMapクラスを利用します。

<!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,railwaymap.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map, smap;

    function loadMap() {

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

        createRailwayMap(1);
    };

    /* 「路線図表示」エリア選択時に動作 */
    function addRailwayMap() {
        /* 再作成のために、路線図があれば消す */
        if (smap) {
            smap.removeMainMap();
            smap.removeSubMap();
        }
        document.getElementById("area").style.visibility = "visible";
        document.getElementById("subarea").style.visibility = "visible";

        createRailwayMap(document.getElementById("mapNo").value);
    };

    /* 路線図を表示 */
    function createRailwayMap(mapNo){
         var obj = {
            mapNo: parseInt(mapNo),
            mainMap: document.getElementById("area"),
            callback: showRailwayMap,
            subMap: document.getElementById("subarea")
        };
        smap = new ZDC.RailwayMap(obj);
    };

    /* 路線図の駅クリック時に動作 */
    var showRailwayMap = 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="position: absolute; top:330px; left:20px; overflow: hidden; border: 1px solid; width:500px;height:400px;"></div>
    <div id="subarea" style="position: absolute; top:330px; left:20px; overflow: hidden; border: 1px solid;"></div>
    <div id="IBox" style="top:0px; left:540px; position:absolute;">
        <select name="mapNo" id="mapNo" onChange="addRailwayMap();">
            <option value="1" selected="selected">札幌</option>
            <option value="2">仙台周辺</option>
            <option value="3">首都圏</option>
            <option value="4">愛知周辺</option>
            <option value="5">京都</option>
            <option value="6">大阪周辺</option>
            <option value="7">福岡周辺</option>
        </select>
    </div>
</body>
</html>