ZENRIN Maps APIの始め方

# はじめに
#### ゼンリンの地図データをAPIで活用する
ZENRIN Maps APIは、ゼンリンの全国を網羅的に調査・整備した高品質な地図データを、API形式でご利用いただけるサービスです。  
本記事では、APIキーの取得から初期設定、簡単な地図表示までの基本的な流れをご紹介します。  
**2か月無料でご利用いただける「お試しID」を提供していますので、ぜひご活用ください。**

# お試しIDの取得手順
#### STEP１．お試しIDのお申し込み
下記のお試しID申し込みフォームより必要事項を入力し、お申し込みください。
[[ZENRIN Maps API　２か月無料お試しID　お申込みフォーム​]​](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=68381fa8e91b3501e9753412&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=QiitaOrganization)

![zips_お申込みフォーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023353/19e4118c-d57a-4489-979d-c9276ffec1ba.jpeg)

#### STEP２．コンソールにログイン
フォーム送信後、メールにて送られてきた契約IDとパスワードを入力し、[コンソール](https://test-console.zmaps-api.com/)にログインをします。
![zipsコンソールtop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/8404e6f8-720e-4477-b2fb-bf694689f048.png)

#### STEP３．認証方式を設定
チャネルの設定変更は左メニューの「チャネル設定」から行うことができます。
「チャネル設定」押下後表示される画面から「編集」ボタンを押下してください。
![ZMA_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/6e53e2f0-61f3-e67b-48f4-4454411c2fd4.png)

認証方式は、IP・リファラ・OAuth2.0の3種類です。
ご利用になる認証方式のタブを押下して、「無効」を「有効」に変更してください。
有効にしたい認証方式が複数ある場合は、それぞれの認証方式のタブで「有効」状態に変更してください。
それぞれの設定項目を入力後「変更」ボタンを押下すると有効状態と設定項目が反映されます。
![ZMA_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/19bfbee6-b973-3e4b-adde-7e6319ea2b05.png)

#### STEP４．APIキーの取得・API利用開始
「チャネル一覧」のグレーアウトされている箇所にマウスオーバーすると表示される「APIキー」を使い、[APIリファレンス](https://developers.zmaps-api.com/v20/reference/)に則りAPIの利用を開始してください。
![ZMA_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/0ff5f1b3-46dd-efe6-55ce-6bdab4a2005f.png)

# 地図表示のサンプルコード
#### さっそく東京駅中心の地図を表示してみましょう
以下はHTML/JavaScriptで地図を表示する例となります。
```html
<!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>
    <!-- ローダーのメソッド実行 -->
    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);
    mapOptions.mouseWheelReverseZoom = true;

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

```

コードを実行した結果は、下記となります。
![map表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/06bba388-f765-400d-af15-b4725997bd28.png)

皆様もぜひお試しください。
[ZENRIN Maps API　２か月無料お試しID　お申込みフォーム​](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=68381fa8e91b3501e9753412&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=QiitaOrganization)

# おわりに
ZENRIN Maps APIは、地図の表示だけでなく、**住宅・建物・道路といった詳細な情報までカバーした、精度の高い地図データ**をAPIで活用できるサービスです。  
今回は検証用キーの発行から簡単な地図の表示までをご紹介しましたが、今後も機能の活用方法やリリース情報を随時発信していきます。
ぜひフォローいただき、ZENRIN Maps APIの活用にお役立てください。