🏠 はじめに

日本には「難読住所」と呼ばれる、読み方が難しい地名が数多く存在します。
例えば、「寒河江市」は何と読むでしょうか？「さむかわえし」ではなく、正解は「さがえし」です。

こうした難読住所の読み方を紹介するサイトはありますが、「実際にどの場所なのか地図で確認できる」サービスはあまり見かけません。
そこで、ZENRIN Maps API を活用し、クイズ形式で楽しく学べるWebアプリを作成しました！
クイズに答えると、その住所の場所が地図上に表示されます。
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を活用して面白い地図アプリを作ってみてください！

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