はじめに
前回の記事では、ZENRIN Maps APIを使ってWebページに地図を表示し、マーカーを配置する方法をご紹介しました。
今回は画像出力機能を使って地図画像（PNG）を直接取得し、Webページに表示する方法をご紹介いたします。
地図画像出力では、ユーザー定義の図形（GeoJSON形式）を重ねて表示することも可能です。
エリアやルートなど、自社で保持している地理データを地図に重ねて出力したい場合に便利です。
図形データの定義方法や指定方法については、以下のリファレンスが参考になります。
ユーザー図形の指定方法（GeoJSON）
APIキー取得手順
ZENRIN Maps APIを使用するには、APIキーの取得が必要です。
APIキーの取得方法については、以下の記事で詳しく解説されていますので、まずはこちらをご覧ください。
完成イメージ
指定した緯度経度を中心とした地図画像が表示されます。
地図出力する基本コード
以下のコードをhtmlファイルとして保存し、ブラウザで開いてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ZENRIN Maps API - 地図画像表示</title>
<style>
#mapImage {
width: 600px;
height: 400px;
border: 1px solid #ccc;
display: block;
margin-top: 1em;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>ZENRIN Maps API 地図画像の表示</h1>
<img id="mapImage" alt="地図画像を表示します" style="display:none;" />
<div class="error" id="errorMsg"></div>
<script>
window.onload = () => {
const apiKey = 'YOUR_API_KEY'; // ← 実際のAPIキーに差し替えてください
const url = 'https://test-web.zmaps-api.com/map/map';
// POSTパラメータを構築
const params = new URLSearchParams();
params.append('center', '139.767125,35.681236'); // 東京駅
params.append('zoom', '15');
params.append('width', '600');
params.append('height', '400');
params.append('maptype', 'kP8KjZdn'); // スタンダード地図デザイン
params.append('copyrights', 'true');
// ヘッダー設定
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': apiKey,
'Authorization': 'referer',
'Referer': location.href // ローカル開発ならlocalhostに制限を設定
};
fetch(url, {
method: 'POST',
headers: headers,
body: params.toString()
})
.then(res => {
if (!res.ok) {
return res.text().then(err => {
throw new Error(`HTTP ${res.status} ${res.statusText}\n${err}`);
});
}
return res.blob();
})
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
const img = document.getElementById('mapImage');
img.src = imageUrl;
img.style.display = 'block';
})
.catch(err => {
document.getElementById('errorMsg').textContent = `エラー: ${err.message}`;
console.error('地図取得エラー:', err);
});
};
</script>
</body>
</html>
ポイント解説
| 項目 | 説明 |
|---|---|
center |
中心座標を指定 "経度,緯度"で指定します。 centerを指定した場合、zoomの指定が必須です。 |
zoom |
ズームレベルを指定 3から22の値で指定します。 小数値も指定可能です。 |
width |
画像の横幅をピクセル単位で指定 |
height |
画像の横幅をピクセル単位で指定 |
maptype |
マップタイプを指定 |
copyrights |
コピーライトの出力 true 出力する false 出力しない |
key |
ZENRIN Maps APIのAPIキー（要取得） |
APIキーの取得について
ZENRIN Maps APIを使用するには、APIキーの取得が必要です。
APIキーの取得方法については、以下の記事で詳しく解説されていますので、まずはこちらをご覧ください。
公式リファレンス
おわりに
ZENRIN Maps APIの画像出力機能は、静的な地図画像を取得するための強力な手段ですが、いくつかの便利な拡張機能も用意されています。
たとえば、OGC（Open Geospatial Consortium）準拠のWeb Map Tile Service（WMTS）形式にも対応しており、
GISソフトウェアや外部の地図クライアントとの連携が可能になります。
今後も、ZENRIN Maps APIの活用方法やアップデート情報を発信していきます。
ぜひフォローいただき、ZENRIN Maps APIの活用にお役立てください。