スタートガイド

APIの実装に関する情報や実装方法を解説します。

APIを利用した最も簡単なサンプル

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

ソースコードと解説

地図を表示させるまでの手順は次の通りです。

　　１．script タグにローダーの処理を記述して、zdcmap.jsを読み込みます。

　　２．地図を表示する領域の div 要素「ZMap」を作成します。（名称は任意です）

　　３．ZDC.Mapオブジェクトを作成して、mapオブジェクトに代入する処理を記述します。

　　４．map オブジェクトを body タグの onloadイベントから初期化します。

<!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&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    /* 東京 */
    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:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>

1行目で文書型の宣言を行っています。
APIでは、次の文書宣言で動作が保障されています。
　・<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
　・<!DOCTYPE html>(IE6,7,8を除く)
上記以外の記述ではお客様のWebページ中の表示位置や内容がブラウザごとに異なる場合があります。

5行目の<meta>は必須ではありませんが、文字化けを防ぐためのものです。

6行目の<script>でAPIをダウンロードします。
ダウンロードにはローダー（loader.cgi）を使い、お客様のキーや、ローダーに関するオプションパラメータを指定します。

13～21行目で、地図を表示する記述を行っています。
APIのZDC.Mapクラスを利用して、第1引数にdiv要素「Zmap」を、第2引数に地図の初期表示に関するオプションパラメータを指定します。
このWebページでは初期表示位置(latlon)、及び初期表示の縮尺(zoom)の指定を行っています。

26行目で、onload イベントに紐付けて地図の表示を行うようにする設定を行っています。
この処理は必須ではありませんが、APIの実行がWebページの読み込みより先に行われるケースを回避します。

27行目で、地図をWebページに表示する領域を定義して、styleの指定を行っています。
ここでは「ZMap」としていますが、div要素は任意の名称が利用可能です。

styleの指定はwidth, height, top, left, positionまで設定することが推奨されます。
width, heightの設定は必須になります。px単位の数値を300px;のように指定するか、%つきの数値を100%;のように指定してください。
top, leftには、px単位の数値を10px;のように指定してください。未設定の場合は0pxと同義になります。
positionには、absoluteまたはrelativeのどちらかを指定してください。未設定の場合はrelativeと同義になります。
いずれの値も、お客様のWebページ上で適切に表示されるように設定する必要があります。

APIの利用方法

APIを利用するにはローダーを利用します。

APIファイル一覧

利用可能なAPIファイルの一覧です。

ファイル名	対応クラス	機能
zdcmap.js	ZDC.Map	地図を作成するクラス
	ZDC.Marker	マーカを作成するクラス
	ZDC.MapCenter	中心点画像を作成するクラス
	ZDC.ScaleBar	スケールバーを作成するクラス
	ZDC.MsgInfo	吹き出しを作成するクラス
	ZDC.LatLon	緯度経度を保持するクラス
	イベント	地図やウィジットのイベントを扱うための定数・メソッド
	ユーティリティメソッド	各種ユーティリティメソッド
	ZDC.LatLonBox	緯度経度の矩形を生成するクラス
	ZDC.Pixel	ピクセル座標を保持するクラス
	ZDC.PixelBox	ピクセル座標の矩形を生成するクラス
	ZDC.TL	トップ、レフトを保持するクラス
	ZDC.WH	幅高さを保持するクラス
	ZDC.UserTile	ユーザ独自のタイルを重畳するクラス
shape.js	ZDC.Polyline	線・多角形を描画するクラス
shape.js	ZDC.Oval	円・楕円を描画するクラス
geo.js	ジオメトリック	幾何計算等を行うためのメソッド
control.js	ZDC.Control	コントロールを作成するクラス
usercontrol.js	ZDC.UserControl	ユーザ独自のコントロールを作成するクラス
userwidget.js	ZDC.UserWidget	ユーザウィジットを作成するクラス
userwidget.js	ZDC.StaticUserWidget	地図に連動しないユーザウィジットを作成するクラス
search.js	ZDC.Search	検索を実行するためのメソッドが定義されたネームスペース
submap.js	ZDC.Submap	サブマップを作成するクラス
areamap.js	ZDC.AreaMap	地域図を作成するクラス
railwaymap.js	ZDC.RailwayMap	路線図を作成するクラス

マップタイプ

API では複数のマップタイプを用意しており、用途に応じた地図をご利用いただけます。

スマートフォン・タブレットでのご利用

APIはスマートフォン・タブレットでもご利用いただけます。

PCとの差異

・ZDC.MapクラスのgetPointerPosition()が利用できません。
・一部のイベントが発生しません。

画面表示

スマートフォン・タブレットの解像度に合わせて、metaタグ(viewport)の設定や、専用のWebページの作成が推奨されます。
実装例

地図の印刷

ブラウザによっては、透過PNG形式の画像やウィジットの印刷がサポートされません。
ZDC.MapクラスのsetPrintModeOn()を利用した印刷用のページを別途表示することが推奨されます。
実装例

イベント

ZDC.addListener()を使って地図やウィジットにイベントリスナを登録すると、追加したイベントが発生したときに地図やウィジットを操作できます。
実装例