利用手順

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

認証方式

認証方式は以下のいずれかを選択してください。

認証方式 設定値
接続元IPアドレス制限 ip
接続元リファラ制限 referer
OAuth2.0認証 Bearer[トークン文字列]

JavaScript APIを利用したサンプル

次のサンプルは、APIを利用した最も簡単なサンプルとして、ip,referer認証で東京駅を中心とした地図を表示します。
※ OAuth2.0認証を用いた実装例はこちら
地図はマウスによるドラッグ＆ドロップによるスクロールと、マウスホイールによる縮尺レベルの変更ができます。

ソースコードと解説

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

  1. ローダーを読み込みます。
    APIへのリクエストパラメータとして、APIキー(key)、認証を行う方式(auth)をパラメータに設定します。
    APIキー、認証方式はコンソールの「チャネル設定」＞「チャネル一覧」をご確認ください。

    サンプルコード(HTML)

    サンプルコード中 {DOMAIN} は接続先のドメインを指定してください。
    接続先ドメインはこちらをご確認ください。 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Display a map</title>
  <style>
    body {margin: 0; padding: 0;}
    #ZMap {position: absolute; top: 0; bottom: 0; width: 100%;}
  </style>
  <!-- ローダーを読み込む -->
  <script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
</head>
<body>
  <div id="ZMap"></div>
  <script>
    // 手順2の処理を記載
    // JavaScript APIの処理をここに記載
  </script>
</body>
</html>

  2. ローダーのメソッドを実行します。
    メソッド内で地図の初期化を行います。

    初期化時、mapOptionsには下記の値が設定されます。
    {
  minzoom:10
  movable:true
  zoomable:true
  keyboardOperation:true
  mouseOperation:true
  touchOperation:true
  centerZoom:true
}
    サンプルコード(JavaScript)
    <!-- ローダーのメソッド実行 -->
ZMALoader.setOnLoad(function (mapOptions, error) {
  if (error) {
    console.error(error)
    return
  }

// 地図オブジェクト
var map;

// 中心点の緯度経度(東京駅)
const lat = 35.681406, lng = 139.767132;

// マップコンテナ要素を取得する
const mapElement = document.getElementById('ZMap');

// MapOptionsをデフォルト値から変更する場合各パラメータに値を設定
// 中心点の緯度経度を設定
mapOptions.center = new ZDC.LatLng(lat, lng);

// 地図を生成
  map = new ZDC.Map(
    mapElement,
    mapOptions,
    function() {
      // Success callback
      // コントロールを追加する
      // 左上 拡大縮小ボタン表示
      map.addControl(new ZDC.ZoomButton('top-left'));
      // 右上 コンパス表示
      map.addControl(new ZDC.Compass('top-right'));
      // 左下 スケールバー表示
      map.addControl(new ZDC.ScaleBar('bottom-left'));

    },
    function() {
      // Failure callback
    }
  );
})