API 1.11からAPI 3.0への地図表示の変更点

API 1.11から API 3.0への地図表示の変更点について説明します。
API 1.11 スタートガイドページのサンプルと比較して解説します。

APIを利用したサンプル

次のサンプルは、東京駅を中心とした地図を表示します。
地図はマウスによるドラッグ＆ドロップによるスクロールと、マウスホイールによる縮尺レベルの変更ができます。

解説

API 1.11から API 3.0による地図表示の変更点は以下の通りです。

ライブラリをインクルードするには

loaderの記述を3.0用のローダーに変更します。
パラメータに指定できる値はこちらで確認できます。

/* 1.11でのインクルード方法 */
<script src="http://api.e-map.ne.jp/jsapi.cgi?key=_____&ver=1.11&api=zdccommon.js,zdcmap.js&enc=SJIS" type="text/javascript"></script>
                                     ↓
/* 3.0でのインクルード方法 */
<script src="https://api.its-mo.com/v3/loader?key=JSZxxxxxxxxxxxx|xxxxx&api=zdcmap.js&enc=UTF8" type="text/javascript"></script>

地図を表示するには

API 1.11ではZdcMapクラスでしたが3.0ではZDC.Mapクラスとなります。
1.11では引数毎に指定していましたが、3.0では第二引数optionsプロパティに指定します。
プロパティとして指定できる値はこちらで確認できます。

	説明	1.11	3.0
クラス名	地図表示	ZdcMap	ZDC.Map
第一引数	地図を表示するdiv要素	container	DOM
第二引数	中心緯度経度	ZdcPoint	options
第三引数	縮尺レベル	level	-
第四引数	マップタイプ	mtype	-

/* 1.11での指定方法 */
function loadMap() {
    var container = document.getElementById('Map');
    var point = 
    var level = 3,
    var mtype = 1
    map = new ZdcMap(container, point, level, mtype );
 }

/* 3.0での指定方法 */
function loadMap() {
    var dom = document.getElementById('ZMap');
    var opt = {
        latlon: new ZDC.LatLon(lat, lon),
        zoom: 3,
        mapType: ZDC.MAPTYPE_DEFAULT,
        zoomrange:[0,1,2,3,4,5,6,7,8,9,10,11,12],
        wheelType: 1,
        zoomCeter: 'false',
        scale: 1
    };
    map = new ZDC.Map(dom, opt);
}

地図のサイズを指定するには

API 1.11と同様に地図を表示するレイヤオブジェクトのサイズを指定します。
width、heightの指定は必須です。変更はありません。

<div id="Map" style="position:absolute; top:50px; left:50px; width:600px; height:500px;"></div>

API 1.11から API 3.0による地図表示の変更点は以上です。

その他機能のクラス名についても変わっています。
対応表はAPI(1_3系)機能比較表（excel）をご参照ください。

ソースコード

<!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&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">
    /* 東京 */
    var map,
        lat = 35.6778614, lon = 139.7703167;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: new ZDC.LatLon(lat, lon),
                zoom: 3
            }
        );
    }
</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>