やりたいこと
取得したMaps JavaScript APIのAPIキーを用いて、コーディングを行なっていきます。
今回は、簡単なサンプルを用いて、ZENRIN Maps APIによる地図の表示方法を紹介します。
APIキーの取得
１．検証用IDとパスワード（PW）取得
ZENRIN Maps APIを使用するためには、検証用IDとPWを取得しなければなりません。
１－１．検証用IDとPWの発行を依頼
必要事項を入力して送信します。
お試しIDは下記からで簡単に発行できました。（2か月無料でお試しできます）
ZENRIN Maps API 無料お試しID お申込みフォーム
１－２．検証用IDとPWの確認
フォーム送信から3営業日以内にメールにて検証用IDとPWが発行されます。
２．コンソールにログイン
以下のURLでメールにて送られてきたIDとPWを入力し、ログインをします。
https://test-console.zmaps-api.com/
３．ユーザーの設定
ユーザー設定にて、「コンソール管理者メールアドレス」と「情報配信用メールアドレス」を設定します。
特にコンソール管理者メールアドレスはZENRIN Maps API コンソールのパスワードを忘れて再設定が必要となった場合に必要になります。
４．チャネルの認証方式の設定、チャネル名変更
チャネルの設定変更は左メニューの「チャネル設定」から行うことができます。
「チャネル設定」押下後表示される画面にはチャネルの一覧が表示されています。
設定を行うチャネルの「編集」ボタンを押下してください。
認証方式は3種類あり、設定したいタブを押下するとそれぞれの認証方式の設定項目が表示されます。
認証方式を有効にするには、「無効」を「有効」に変更してください。
有効にしたい認証方式が複数ある場合は、それぞれの認証方式のタブで「有効」状態に変更してください。
それぞれの設定項目を入力後「変更」ボタンを押下すると有効状態と設定項目が反映されます。
５．APIキーの取得・API利用開始
「チャネル一覧」のグレーアウトされている箇所にマウスオーバーすると表示される「APIキー」を使い、
下記URLのAPIリファレンス に則りAPIの利用を開始してください。
https://developers.zmaps-api.com/v20/reference/
これで準備は完了です。
サンプルコード
東京駅を中心とした地図を表示します。
<!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);
// 地図を生成
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
}
);
})
</script>
</body>
</html>
地図表示
解説
1. ローダーを読み込みます。
サンプルコード中 {DOMAIN} は接続先のドメインを指定します。
接続先ドメインはこちらをご確認ください。
APIへのリクエストパラメータとして、APIキー(key)、認証を行う方式(auth)をパラメータに設定します。
APIキー、認証方式はコンソールの「チャネル設定」＞「チャネル一覧」をご確認ください。
<!-- ローダーを読み込む -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
2. ローダーのメソッドを実行します。
メソッド内で地図の初期化を行います。
<!-- ローダーのメソッド実行 -->
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error)
return
}
初期化時、mapOptionsには下記の値が設定されます。
{
minzoom:10
movable:true
zoomable:true
keyboardOperation:true
mouseOperation:true
touchOperation:true
centerZoom:true
}
3. javaScriptの設定内容
・緯度経度
中心点に東京駅の緯度経度を設定しています。
// 中心点の緯度経度(東京駅)
const lat = 35.681406, lng = 139.767132;
// 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
}
);