更新履歴スタートガイドAPIの実装に関する情報や実装方法を解説します。↑APIを利用した最も簡単なサンプル次のサンプルは、APIを利用した最も簡単なサンプルとして、東京駅を中心とした地図を表示します。地図はマウスによるドラッグ&ドロップによるスクロールと、マウスホイールによる縮尺レベルの変更ができます。地図を表示させるまでの手順は次の通りです。タグにローダーの処理を記述して、zdcmap.jsを読み込みます。要素「ZMap」を作成します。(名称は任意です)3.ZDC.Mapオブジェクトを作成して、mapオブジェクトに代入する処理を記述します。onloadイベントから初期化します。position:absolute;"></div></body></html>1行目で文書型の宣言を行っています。APIでは、次の文書宣言で動作が保障されています。html>(IE6,7,8を除く)上記以外の記述ではお客様のWebページ中の表示位置や内容がブラウザごとに異なる場合があります。5行目の<meta>は必須ではありませんが、文字化けを防ぐためのものです。6行目の<script>でAPIをダウンロードします。ダウンロードにはローダー(loader.cgi)を使い、お客様のキーや、ローダーに関するオプションパラメータを指定します。13〜21行目で、地図を表示する記述を行っています。APIのZDC.Mapクラスを利用して、第1引数にdiv要素「Zmap」を、第2引数に地図の初期表示に関するオプションパラメータを指定します。このWebページでは初期表示位置(latlon)、及び初期表示の縮尺(zoom)の指定を行っています。イベントに紐付けて地図の表示を行うようにする設定を行っています。この処理は必須ではありませんが、APIの実行がWebページの読み込みより先に行われるケースを回避します。27行目で、地図をWebページに表示する領域を定義して、styleの指定を行っています。ここでは「ZMap」としていますが、div要素は任意の名称が利用可能です。positionまで設定することが推奨されます。heightの設定は必須になります。px単位の数値を300px;のように指定するか、%つきの数値を100%;のように指定してください。leftには、px単位の数値を10px;のように指定してください。未設定の場合は0pxと同義になります。positionには、absoluteまたはrelativeのどちらかを指定してください。未設定の場合はrelativeと同義になります。いずれの値も、お客様のWebページ上で適切に表示されるように設定する必要があります。↑APIの利用方法APIを利用するにはローダーを利用します。利用可能なAPIファイルの一覧です。複数のマップタイプを用意しており、用途に応じた地図をご利用いただけます。↑スマートフォン・タブレットでのご利用APIはスマートフォン・タブレットでもご利用いただけます。・ZDC.MapクラスのgetPointerPosition()が利用できません。・一部のイベントが発生しません。画面表示スマートフォン・タブレットの解像度に合わせて、metaタグ(viewport)の設定や、専用のWebページの作成が推奨されます。地図の印刷ブラウザによっては、透過PNG形式の画像やウィジットの印刷がサポートされません。ZDC.MapクラスのsetPrintModeOn()を利用した印刷用のページを別途表示することが推奨されます。発生したときに地図やウィジットを操作できます。