ZDC.Search.getByZmapsを使う

実行結果

次の例では、ボタンを押した際に、都庁の周辺のコンビニを検索します。
ソースコードと解説

WebAPIを利用するには、ZDC.Search.getByZmaps()を利用します。
WebAPIのapi名である poi/latlon、緯度経度とジャンルコードを指定して周辺の施設を検索します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,search.js&enc=UTF8" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
    var map, msg,
        lat = 35.6778614, lon = 139.7703167, arrmrk = [];

    function loadMap(){
        var latlon  = new ZDC.LatLon(lat, lon);
        map = new ZDC.Map(document.getElementById('ZMap'),{
            latlon: latlon,
            zoom: 9,
            mapType: ZDC.MAPTYPE_HIGHRES_LV18 
        });

        msg = new ZDC.MsgInfo(latlon, {offset: ZDC.Pixel(0, -18)});
        map.addWidget(msg);

        var scale = new ZDC.ScaleBar();
        map.addWidget(scale);
        map.addWidget(new ZDC.Control());
    }

    function exec(){
        /* 緯度経度で周辺のPOI探索を実行 */
        /* ジャンルコード（コンビニ：0014000180） */
        ZDC.Search.getByZmaps('poi/latlon', {
            latlon: '35.6863166,139.695047',
            genrecode: '0014000180',
            limit: '0,10'
        },function(status, res) {
            if (status.code === 200 && res.status.code === '0000') {
                /* 取得成功 */
                markerDisp(res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    }

    function markerDisp(res) {
        if (res.item.length === 0) {
            alert('検索結果が0件です。');
        }
        /* マーカを作成 */
        var items = res.item;
        var latlons = [];
        for (var i=0, j=items.length; i<j; i++) {

            var itemlatlon = new ZDC.LatLon(items[i].poi.point.lat, items[i].poi.point.lon);

            latlons.push(itemlatlon);

            var mrk = new ZDC.Marker(itemlatlon);
            map.addWidget(mrk);
            arrmrk.push(mrk);

            /* マーカをクリックしたときの動作 */
            ZDC.bind(mrk, ZDC.MARKER_CLICK, items[i].poi, markerClick); 

        }

        /* 地点が全て表示できる縮尺レベルを取得 */
        var adjust = map.getAdjustZoom(latlons);
        map.moveLatLon(adjust.latlon);
        map.setZoom(adjust.zoom);
    }

    function markerClick() {
        var labelhtml;
        labelhtml = '<div><font size = "-1"><div><b>' + this.text + '</b></div>';
        labelhtml += '<table><tr><td>\u3012' + this.zipcode + ' ' + this.addressText + '</td></tr>';
        labelhtml += '<tr><td>電話番号：' + this.phoneNumber + '</td></tr></table></font></div>';

        msg.setHtml(labelhtml);
        msg.moveLatLon(new ZDC.LatLon(this.point.lat, this.point.lon));
        msg.open();
    }

    function markerDelete(){
        /* マーカを削除 */
        while(arrmrk.length > 0){
            map.removeWidget(arrmrk.shift());
        }
        /* 吹き出しを閉じる */
        msg.close();
    }

</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 id="IBox" style="top:40px; right:40px; position:absolute;">
        <input type="button" value="検索実行" onclick="exec();"><br>
        <input type="button" value="結果削除" onclick="markerDelete();">
    </div>
</body>
</html>