いつもNAVI API マニュアル

※本機能の利用には別途契約が必要です
多言語で地図を検索・表示する

実行結果

次の例では、多言語で地図の表示と検索を行います。
ソースコードと解説

多言語で地図を検索するには、ZDC.Search.getByZmaps()のaddress/wordを指定します。
多言語で地図を表示するには、ZDC.Mapの第二引数のオプションmapTypeを指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,search.js,control.js,searchml.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

    var map, lang;

    function loadMap() {
        var type;
        switch (document.getElementById('MapLang').value) {
            case 'ko':
                type = ZDC.MAPTYPE_HIGHRES_HANGEUL;
                break;
            case 'en':
                type = ZDC.MAPTYPE_HIGHRES_ALPHABETS;
                break;
            case 'tw':
                type = ZDC.MAPTYPE_HIGHRES_HANTAI;
                break;
            case 'cn':
                type = ZDC.MAPTYPE_HIGHRES_KANTAI;
                break;
            default:
                type = ZDC.MAPTYPE_HIGHRES_DEFAULT;
                break;
        }

        map = new ZDC.Map(document.getElementById('ZMap'), {
            zoom: 10,
            mapType: type
        });

        map.addWidget(new ZDC.ScaleBar());
        map.addWidget(new ZDC.Control());

    }

    function changeSearchLang() {
        var addrsearch;
        switch (document.getElementById('SearchLang').value) {
            case 'ko':
                addrsearch = '??? ????';
                break;
            case 'en':
                addrsearch = 'TokyoMet. Chiyodaku';
                break;
            case 'tw':
                addrsearch = '東京都 千代田區';
                break;
            case 'cn':
                addrsearch = '?京都 千代田区';
                break;
            default:
                addrsearch = '東京都千代田区';
                break;
        }
        document.getElementById('AddrSearch').value = addrsearch;
    }

    function exec() {
        var address = document.getElementById('AddrSearch').value;
        lang = document.getElementById('Lang').value;
        var mlang;
        switch (lang) {
            case 'ko':
                mlang = 'mlang_ko';
                break;
            case 'en':
                mlang = 'mlang_en';
                break;
            case 'zn-tw':
                mlang = 'mlang_tw';
                break;
            case 'zn-cn':
                mlang = 'mlang_cn';
                break;
            default:
                break;
        }

        /* 地名で検索 */
        ZDC.Search.getByZmaps('address/word', {
            word: address,
            limit: '0,1'
        },　function(status, res) {
            if (status.code === 200 && res.status.code === '0000') {
                /* 取得成功 */
                searchResult(status, res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    }

    function searchResult(status, res) {
        if(res.info.hit==0){
            alert('検索結果0件');
            return;
        }
        var item = res.item[0];

        /* 検索地点を中心点として地図を移動 */
        map.moveLatLon(item.point);

        /* マーカを作成 */
        var mrk = new ZDC.Marker(item.point);
        map.addWidget(mrk);

        /* 吹き出しを作成 */
        var labelhtml;
        if (lang === 'ja') {
            labelhtml = item.text;
        } else {
            labelhtml = item.language[lang].text;
        }

        var msg = new ZDC.MsgInfo(item.point, {
            html: labelhtml, offset: ZDC.Pixel(0, -18)});
        map.addWidget(msg);
        msg.open();

        /* 結果オブジェクトを表示（上記地図の右側参照）*/
        var json = JSON.stringify(res, null, 4);
        json = json.replace(/\n/g, '<br>');
        document.getElementById('result').innerHTML =
            json.replace(/\s/g, '&nbsp;');
        document.getElementById('result').style.overflowY = 'scroll';
    }

</script>
</head>
<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px;
        position:absolute;"></div>
    <div style="width:510px; height:30px; top:510px; left:20px; position:absolute;">
        <span>地図言語</span>
        <select id="MapLang" onchange="loadMap();">
            <option value="ja" selected>日本語</option>
            <option value="ko">韓国語</option>
            <option value="en">英語</option>
            <option value="tw">中国語（繁体）</option>
            <option value="cn">中国語（簡体）</option>
        </select><br>
        <span>検索言語</span>
        <select id="SearchLang" onchange="changeSearchLang();">
            <option value="ja" selected>日本語</option>
            <option value="ko">韓国語</option>
            <option value="en">英語</option>
            <option value="tw">中国語（繁体）</option>
            <option value="cn">中国語（簡体）</option>
        </select>
        <input type="text" id="AddrSearch" style="width:200px;left:200" value="東京都千代田区">
        <input type="button" value="検索" onclick="exec();"><br>
        <span>出力言語</span>
        <select id="Lang">
            <option value="ja" selected>日本語</option>
            <option value="ko">韓国語</option>
            <option value="en">英語</option>
            <option value="zh-tw">中国語（繁体）</option>
            <option value="zh-cn">中国語（簡体）</option>
        </select>
    </div><br>
    <div id="result" style="width:750px; height:250px; top:600px; left:20px; position:absolute;"></div>
</body>
</html>