はじめに

みなさん、地図APIを使ったことはありますか？

今回は、ZENRIN Maps API を使って、
初心者エンジニアの私が福井県立恐竜博物館に恐竜のピンを立ててみました！

✅ 福井県立恐竜博物館を地図の中心に設定
✅ ティラノサウルス・トリケラトプス・プテラノドンのマーカーを追加
✅ カスタム画像をマーカーに設定

「初心者でも簡単にできる！」をコンセプトにしているので、
ぜひ一緒に試してみてください！

環境・事前準備

必要なもの

ZENRIN Maps API
HTML・JavaScript（シンプルなフロントエンド実装）
APIキー（事前取得）

ZENRIN Maps APIの利用にはAPIキーが必要です。
無料トライアルページから取得してください。２カ月間無料で利用できます！

実装手順

1. ZENRIN Maps APIをロードし、地図を表示

まず、APIのローダースクリプトを読み込み、地図を作成します。

<!-- ローダーのURLをscriptでロード -->
<script src="https://test-js.zmaps-api.com/zma_loader.js?key=YOUR_API_KEY&auth=referer"></script>

次に、地図の中心を福井県立恐竜博物館（36.0829218, 136.5065619）に設定し、
マップを作成します。

// 中心点の緯度経度（福井県立恐竜博物館）
const lat = 36.0829218, lng = 136.5065619;

// ZMALoader
ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
        console.error(error);
        return;
    }

    // 地図オプションを設定
    mapOptions.center = new ZDC.LatLng(lat, lng);
    mapOptions.mouseWheelReverseZoom = true; // ズームの方向を調整
    mapOptions.zoom = 16

    // 地図を生成
    map = new ZDC.Map(
        document.getElementById('ZMap'),
        mapOptions,
        function() {
            console.log("地図が表示されました！");
        }
    );
});

これで、福井県立恐竜博物館を中心にした地図が表示されるようになりました！

2. 恐竜マーカーを追加する

次に、恐竜のマーカーを地図上に配置します。

今回は、以下の3か所にマーカーを設置します：

・福井県立恐竜博物館（トリケラトプス）
・ティラノサウルス広場（ティラノサウルス）
・かつやま恐竜の森（プテラノドン）

恐竜マーカーを作成

// トリケラトプスマーカー
mrk_widget = new ZDC.Marker(
    new ZDC.LatLng(lat, lng),
    {
        custom: {
            base: {
                imgSrc: 'dinosaur5r.gif',
                imgPos: new ZDC.Point(-30, -100),
                imgSize: new ZDC.Point(100, 100),
            }
        }
    }
);
// ティラノサウルスマーカー
mrk_widget2 = new ZDC.Marker(
    new ZDC.LatLng(36.08460621, 136.50262056),
    {
        custom: {
            base: {
                imgSrc: 'dinosaur3r.gif',
                imgPos: new ZDC.Point(-70, -120),
                imgSize: new ZDC.Point(100, 100),
            }
        }
    }
);
// プテラノドンマーカー
mrk_widget3 = new ZDC.Marker(
    new ZDC.LatLng(36.08440084, 136.50695369),
    {
        custom: {
            base: {
                imgSrc: 'dinosaur4r.gif',
                imgPos: new ZDC.Point(150, -100),
                imgSize: new ZDC.Point(100, 100),
            }
        }
    }
);

3. マーカーを地図に追加

最後に、作成したマーカーを地図に追加します。

map.addWidget(mrk_widget);
map.addWidget(mrk_widget2);
map.addWidget(mrk_widget3);

実行結果

実際にブラウザで表示すると、3種類の恐竜マーカーが追加された地図が表示されます！

・🦖 ティラノサウルス
・🦕 トリケラトプス
・🦅 プテラノドン

このように、ZENRIN Maps APIを使えば、好きな場所にカスタム画像のピンを立てることが簡単にできます！

おわりに

地図APIって難しそうに感じるけど、実際に触ってみると意外と簡単！
皆さんも、ZENRIN Maps APIを使ってオリジナルの地図を作ってみてください！

質問やフィードバックがあれば、コメントで教えてください！

恐竜ピンの素材：ぱたぱたアニメ館