初心者エンジニアが地図APIを使って福井の恐竜博物館に恐竜のピンを立ててみた！


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


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

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

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

---

## 環境・事前準備

### 必要なもの
- **ZENRIN Maps API**
- **HTML・JavaScript（シンプルなフロントエンド実装）**
- **APIキー（事前取得）**

ZENRIN Maps APIの利用にはAPIキーが必要です。  
[無料トライアルページ](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=67639ea20dbf8e0642d60032&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=Qiita41) から取得してください。２カ月間無料で利用できます！

---

## 実装手順

### 1. **ZENRIN Maps APIをロードし、地図を表示**
まず、APIのローダースクリプトを読み込み、地図を作成します。

```html
<!-- ローダーのURLをscriptでロード -->
<script src="https://test-js.zmaps-api.com/zma_loader.js?key=YOUR_API_KEY&auth=referer"></script>
```
次に、地図の中心を**福井県立恐竜博物館**（36.0829218, 136.5065619）に設定し、
マップを作成します。
```javascript
// 中心点の緯度経度（福井県立恐竜博物館）
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か所にマーカーを設置します：

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


恐竜マーカーを作成
```javascript
// トリケラトプスマーカー
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. マーカーを地図に追加
最後に、作成したマーカーを地図に追加します。
```javascript
map.addWidget(mrk_widget);
map.addWidget(mrk_widget2);
map.addWidget(mrk_widget3);
```
## 実行結果
実際にブラウザで表示すると、[**3種類の恐竜マーカーが追加された地図**](https://rinji0000000.github.io/Qiita_dinosaur/Qiita.html)が表示されます！

・🦖 **ティラノサウルス**
・🦕 **トリケラトプス**
・🦅 **プテラノドン**
![スクリーンショット 2025-03-05 152043.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979764/8ac0e3ba-dd14-4f3e-aea5-bf9839a2b042.png)

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

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

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

恐竜ピンの素材：[ぱたぱたアニメ館](https://pata2.jp/127/nature/nature6.html)