はじめに🐖
【ZENRIN Maps API】ではマップ上に マーカー(ピン) を設置・表示させることが可能です📍
下記はイメージです👇🏻
今回は設置したマーカーを押した際に、場所の詳細が記載されている 吹き出し(ポップアップ) を表示させる方法をご紹介します💬
この記事でできること
・ZENRIN Maps APIを使って地図を描画
・地図上にマーカー、吹き出しを表示
・マーカーと吹き出しのカスタム
ZENRIN Maps APIとは🧐
【ZENRIN Maps API】はゼンリンの地図データを、API形式でご利用いただけるサービスです。
主な特徴としては下記があります。
・過去から現在までの地図情報 を表示できる
・ZID と呼ばれる独自のIDにより建物の変化情報を時系列で把握できる
他にもさまざまな機能がありますので、公式サイトもご参照ください。
地図表示を行うために💻
【ZENRIN Maps API】のご利用には申し込みが必要です。以下のQiita記事が参考になりますので、ご確認ください。
【ZENRIN Maps API】の利用申し込み
※2か月間は無料で【ZENRIN Maps API】が利用できます。
公式リファレンス📚
地図、マーカー、吹き出しを表示させるコード🗺️
以下は、地図を表示し、マーカーを設置し、クリック時に吹き出しを表示する基本的なHTMLコードです👇🏻
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
// オブジェクト
var map, mrk_widget;
// 中心点の緯度経度
const lat = 35.642955, lng = 139.742387;
// ZMALoader
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error)
return
}
// マップオプションをデフォルト値から変更する
mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定
// 地図を生成
map = new ZDC.Map(
document.getElementById('ZMap'),
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'));
/* マーカーを作成 */
mrk_widget = new ZDC.Marker(
new ZDC.LatLng(35.642955, 139.742387),//マーカーを置く場所
{
styleId: ZDC.MARKER_COLOR_ID_GRAY_S,
contentStyleId: ZDC.MARKER_NUMBER_ID_1_S
}
);
/* ★マーカーをクリック時のイベント登録 */
mrk_widget.addEventListener('click', function() {
openPopup(mrk_widget.getLatLng()); // マーカーの表示位置を取得して渡す
});
/* マーカーを追加 */
map.addWidget(mrk_widget);
},
function() {
// Failure callback
}
);
});
/* ★吹き出しの表示 */
function openPopup(latlng) {
map.addWidget(
new ZDC.Popup(
latlng,
{
htmlSource: 'ゼンリンデータコム',
offset: new ZDC.Point(0, -18)
}
)
);
}
</script>
</head>
<body>
<div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>
吹き出しを実際に表示させてみる💬
上記コードで、ゼンリンデータコムの本社がある東京都港区にマーカーを設置した例です📍
このように、簡単にマーカーの設置と吹き出しの表示が可能です。
マーカーと吹き出しをカスタマイズしてみる⚒️
①styleIdを変更してマーカーの色を変更する(赤に変更)📍
mrk_widget = new ZDC.Marker(
new ZDC.LatLng(lat, lng),//マーカーを置く場所
{
styleId: ZDC.MARKER_COLOR_ID_RED_S,
contentStyleId: ZDC.MARKER_NUMBER_ID_1_S
}
);
変更後のイメージです！
②吹き出し内にリンクを入れる🔗
htmlSourceにaタグを記述することで、吹き出し内に文字リンクを挿入できます。
function openPopup(latlng) {
map.addWidget(
new ZDC.Popup(
latlng,
{
htmlSource: 'ゼンリンデータコム<br><a href="https://www.zenrin-datacom.net/" target="_blank">ゼンリンデータコム公式サイトへ</a>',
offset: new ZDC.Point(0, -18)
}
)
);
}
リンクが追加された吹き出しのイメージです！
おわりに
このように、【ZENRIN Maps API】を使用すると、マーカーの設置や吹き出しのカスタマイズを簡単に行うことができます🌟
次回は、複数のマーカーを設置する方法 について解説する予定です。
閲覧ありがとうございました🙇🏻♂️