🗾 はじめに❄️

北海道・東北地方は、広大な自然と独自の文化が息づくエリア！
そのため、地名にも アイヌ語由来のものや古い日本語・方言が反映 されていて、初見では読めないものがたくさんあります。

例えば…
📍 北海道：「占冠（しむかっぷ）」「倶知安（くっちゃん）」
📍 東北：「猪苗代（いなわしろ）」

「知ってる！」と思ったあなたは 地名マスター かも？✨
由来を知ると、さらに面白くなること間違いなし！

🏆 難読地名チャレンジ、スタート！

今週は 北海道・東北地方の難読地名に挑戦！
あなたはいくつ読める？🎯 ぜひ挑戦してみてください！

🔍 住所検索で使ったAPIはこちら！ 🚀

今回の YomiMap で使用したAPIはコチラ👇
🌍 ZENRIN Maps APIは２か月お試し無料！🚀

🎯 アプリの概要

このアプリでは、以下の機能を提供します。

✅ 難読住所クイズ：複数の選択肢から正しい読み方を選ぶ
✅ 地図表示：正解すると、その住所の位置を地図上に表示
✅ ZENRIN Maps API 活用：住所検索と位置情報の取得をAPI経由で実現

🎯 さあ、あなたも難読地名に挑戦しよう！

実際にクイズを楽しめます。
実際の動作は、以下のデモをご覧ください。
YomiMap（読みマップ　北海道・東北編）

🛠 開発の流れ

1. クイズデータの作成

まず、難読住所クイズのデータを用意しました。JavaScriptのオブジェクト配列として、住所名とその選択肢を定義しています。

const quizData = [
    { question: "「長万部」の読み方は？", options: ["おしゃまんべ", "ながまんぶ", "ちょうまんぶ"], correctAnswer: "おしゃまんべ" },
    { question: "「小鳥谷」の読み方は？", options: ["ことりや", "しょうちょうこく", "こずや"], correctAnswer: "こずや" },
    ...
];

2. クイズ画面の作成

ユーザーが選択肢をクリックできるよう、HTMLとCSSでクイズのレイアウトを作成しました。

<div id="quiz-container">
    <h2>問題 1</h2>
    <p>「長万部」の読み方は？</p>
    <div class="button-group">
        <button onclick="checkAnswer('おしゃまんべ')">おしゃまんべ</button>
        <button onclick="checkAnswer('ながまんぶ')">ながまんぶ</button>
        <button onclick="checkAnswer('ちょうまんぶ')">ちょうまんぶ</button>
    </div>
</div>

3. ZENRIN Maps API を使った地図表示

クイズに正解したら、その住所の位置を地図上に表示します。
ZENRIN Maps API を利用して、住所を検索し、緯度経度情報を取得して地図を更新します。

async function searchAddress(address) {
    const response = await fetch('https://test-web.zmaps-api.com/search/address', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-api-key': 'YOUR_API_KEY',
            'Authorization': 'referer'
        },
        body: new URLSearchParams({ word: address, word_match_type: '3', address_level: 'SHK,OAZ', sort: 'address_read' })
    });

    const data = await response.json();
    if (data.status === "OK" && data.result.info.hit > 0) {
        const location = data.result.item[0].position;
        const latLng = new ZDC.LatLng(location[1], location[0]);
        map.setCenter(latLng);
    } else {
        alert("住所の位置情報が見つかりませんでした");
    }
}

🚀 今後の展望

問題の追加： 北海道・東北ならではの難読地名をさらに充実！
エリア別モード： 道央・道東・南東北など地域ごとに挑戦できる機能を追加
ご当地ヒント機能： その地名にまつわる歴史や名産をヒントとして表示

ZENRIN Maps API を活用すれば、正確な地図データとともに、より楽しく学べるコンテンツが作れます！
ぜひ皆さんも、APIを活用して面白い地図アプリを作ってみてください！

📢 ご意見・感想をコメントでお待ちしています！