ゼンリンの地図データをAPIで活用する
ZENRIN Maps APIは、ゼンリンの全国を網羅的に調査・整備した高品質な地図データを、API形式でご利用いただけるサービスです。
本記事では、APIキーの取得から初期設定、簡単な地図表示までの基本的な流れをご紹介します。
2か月無料でご利用いただける「お試しID」を提供していますので、ぜひご活用ください。
STEP１．お試しIDのお申し込み
下記のお試しID申し込みフォームより必要事項を入力し、お申し込みください。
[ZENRIN Maps API ２か月無料お試しID お申込みフォーム]
STEP２．コンソールにログイン
フォーム送信後、メールにて送られてきた契約IDとパスワードを入力し、コンソールにログインをします。
STEP３．認証方式を設定
チャネルの設定変更は左メニューの「チャネル設定」から行うことができます。
「チャネル設定」押下後表示される画面から「編集」ボタンを押下してください。
認証方式は、IP・リファラ・OAuth2.0の3種類です。
ご利用になる認証方式のタブを押下して、「無効」を「有効」に変更してください。
有効にしたい認証方式が複数ある場合は、それぞれの認証方式のタブで「有効」状態に変更してください。
それぞれの設定項目を入力後「変更」ボタンを押下すると有効状態と設定項目が反映されます。
STEP４．APIキーの取得・API利用開始
「チャネル一覧」のグレーアウトされている箇所にマウスオーバーすると表示される「APIキー」を使い、APIリファレンスに則りAPIの利用を開始してください。
さっそく東京駅中心の地図を表示してみましょう
以下はHTML/JavaScriptで地図を表示する例となります。
charset="UTF-8">
id="ZMap">
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
}
);
})
コードを実行した結果は、下記となります。
皆様もぜひお試しください。ZENRIN Maps API ２か月無料お試しID お申込みフォーム
ZENRIN Maps APIは、地図の表示だけでなく、住宅・建物・道路といった詳細な情報までカバーした、精度の高い地図データをAPIで活用できるサービスです。今回は検証用キーの発行から簡単な地図の表示までをご紹介しましたが、今後も機能の活用方法やリリース情報を随時発信していきます。ぜひフォローいただき、ZENRIN Maps APIの活用にお役立てください。
Source link
Views: 0
