スマートフォン・タブレット向けに地図を作成する

実行結果

次の例では、GPSにより緯度経度を取得します。
その緯度経度を地図の中心点にして、マーカと吹き出しを表示します。
吹き出しはタッチ（マウスダウン）すると閉じます。
ソースコードと解説

スマートフォン・タブレットで利用可能なイベントはPCと異なります。
また、このサンプルではviewportを利用しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,userwidget.js&enc=SJIS" type="text/javascript"></script>
<script type="text/javascript">

    var map, msg, watchId,
    mrk = null, lat = 35.6778614, lon = 139.7703167, latlon = new ZDC.LatLon(lat, lon);

    /* 初期表示時に実行される */
    function getGps() {
        if (typeof navigator.geolocation == 'undefined'){
            /* 位置情報が利用できません */
            alert("\u4f4d\u7f6e\u60c5\u5831\u304c\u5229\u7528\u3067\u304d\u307e\u305b\u3093");
            loadMap();
        } else {
            /* GPSの位置情報を取得できるブラウザ */
            watchId = navigator.geolocation.getCurrentPosition(
                successCallback,
                errorCallback
            );
        }
    };

    /* 位置情報の取得に成功したときは、取得した位置を中心点として地図を作成する */
    function successCallback(position){
        /* 世界測地系でGPSの座標を取得 */
        var wgs = new ZDC.LatLon(position.coords.latitude, position.coords.longitude);

        /* 測地系を日本測地系に変換 */
        var tky = ZDC.wgsTotky(wgs);

        latlon = tky;
        loadMap();
    };

    /* 位置情報の取得に失敗したときは、デフォルトの緯度経度を中心点として地図を作成する */
    function errorCallback(err){
        /* 現在地取得に失敗しました */
        alert("\u73fe\u5728\u5730\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f");
        loadMap();
    };

    /* 地図とウィジットを作成する */
    function loadMap() {
        map = new ZDC.Map(
        document.getElementById('ZMap'),{
            latlon: latlon,
            zoom: Number(document.getElementById('zoom-select').value),
            mapType: ZDC.MAPTYPE_HIGHRES_LV18
        });

        /* 地図の縮尺レベルを変更したとき、プルダウンのメニューを変更する */
        ZDC.addListener(map, ZDC.MAP_CHG_ZOOM, function(){
            document.getElementById('zoom-select').value=map.getZoom();
        });

        /* マーカを作成 */
        mrk = new ZDC.Marker(latlon,{
            color: ZDC.MARKER_COLOR_ID_BLUE_S
        });
        /* マーカを追加 */
        map.addWidget(mrk);

        /* 吹き出しを作成 */
        msg = new ZDC.MsgInfo(latlon,{
            /* 現在地 */
            html: '<div><b>\u73fe\u5728\u5730</b></div>',
            offset: ZDC.Pixel(0, -18)
        });

        /* 吹き出しを追加 */
        map.addWidget(msg);
        msg.open();

        /* 拡大ボタンを作成 */
        var plus = new ZDC.StaticUserWidget(
            {
                bottom: 70, left: 10 
            }, 
            {
                html:'<img src="../img/ctrl_plus.png">',
                size: new ZDC.WH(39, 47)
            }
        );
        /* 拡大ボタンを追加 */
        map.addWidget(plus);
        plus.open();

        /* 縮小ボタンを作成 */
        var minus = new ZDC.StaticUserWidget(
            {
                bottom: 20, left: 10
            },
            {
                html:'<img src="../img/ctrl_minus.png">',
                size: new ZDC.WH(39, 47)
            }
        );
        /* 縮小ボタンを追加 */
        map.addWidget(minus);
        minus.open();

        /* マーカをクリックしたときの動作 */
        ZDC.addListener(mrk, ZDC.MARKER_MOUSEDOWN, function(){
            msg.open();
        });

        /* 吹き出しをクリックしたときの動作 */
        ZDC.addListener(msg, ZDC.MSGINFO_MOUSEDOWN, function(){
            msg.close();
        });

        /* 拡大ボタンをクリックしたときの動作 */
        ZDC.addListener(plus, ZDC.STATICUSERWIDGET_MOUSEDOWN, function(){
            map.zoomIn();
        });

        /* 縮小ボタンをクリックしたときの動作 */
        ZDC.addListener(minus, ZDC.STATICUSERWIDGET_MOUSEDOWN, function(){
            map.zoomOut();
        });
    };

    /* プルダウンからの縮尺レベル変更 */
    function changeZoom() {
        var zoom = Number(document.getElementById('zoom-select').value)
        map.setZoom(zoom);
    };

</script>
</head>

<body onload="getGps();">
    <div>
        <div id="ZMap" style="margin:5px; border:1px solid #777777; top:0px; left:20px; width:308px; height:308px; position:absolute;"></div>
        <div style="top:10px; left:200px; position:absolute;">
            <select id="zoom-select" onchange="changeZoom();">
                <option value="0">640km(広域)</option>
                <option value="1">320km</option>
                <option value="2">160km</option>
                <option value="3">80km(都道府県)</option>
                <option value="4">40km</option>
                <option value="5">20km</option>
                <option value="6">10km</option>
                <option value="7">5km(市区町村)</option>
                <option value="8" selected="selected">2.5km</option>
                <option value="9">1.2km</option>
                <option value="10">600m(市街図)</option>
                <option value="11">300m</option>
                <option value="12">150m(詳細)</option>
            </select>
        </div>
    </div>
</body>
</html>