いつもNAVI API マニュアル

実行結果

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

緯度経度とジャンルコードを指定して周辺の施設を検索するには、ZDC.Search.getPoiByLatLon()を利用します。
<!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">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js&enc=EUC&force=1" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
    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: 5
        });

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

    };

    function exec(){
        /* 緯度経度で周辺のPOI探索を実行 */
        /* ジャンルコード（コンビニ：0014000180） */
        ZDC.Search.getPoiByLatLon({
            latlon: new ZDC.LatLon(35.6863166, 139.695047),
            genrecode: '0014000180',
            limit: '0,10'
        },function(status, res) {
            if (status.code == '000') {
                /* 取得成功 */
                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.latlon.lat, items[i].poi.latlon.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.latlon.lat, this.latlon.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:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:540px; position:absolute;">
        <input type="button" value="検索実行" onclick="exec();"><br>
        <input type="button" value="結果削除" onclick="markerDelete();">
    </div>
</body>
</html>