<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>なまあず地図連携ツール Ver.1.3</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #007bff;
            --background-color: #f8f9fa;
            --card-background: #ffffff;
            --text-color: #343a40;
            --muted-text-color: #6c757d;
            --border-color: #dee2e6;
            --shadow-color: rgba(0, 0, 0, 0.05);
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            margin: 0;
            padding: 2em;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2.5em;
            background-color: var(--card-background);
            border-radius: 12px;
            box-shadow: 0 8px 25px var(--shadow-color);
            border: 1px solid var(--border-color);
        }

        h1 {
            color: var(--text-color);
            text-align: center;
            margin-bottom: 1em;
            font-size: 2em;
            font-weight: 700;
        }

        h1 .version {
            font-size: 0.5em;
            font-weight: 400;
            color: var(--muted-text-color);
            margin-left: 0.5em;
        }

        p {
            line-height: 1.8;
            color: var(--muted-text-color);
            text-align: center;
            margin-bottom: 2em;
        }

        #urlInput {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            margin-bottom: 1.5em;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-sizing: border-box;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        #urlInput:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
        }

        .button-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1em;
        }

        .linkButton {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75em;
            padding: 14px 20px;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            background-color: #343a40;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease;
            text-align: center;
        }

        .linkButton:hover {
            transform: translateY(-3px);
        }

        .linkButton svg {
            width: 1.2em;
            height: 1.2em;
            fill: currentColor;
        }
        
        #jibanBtn   { background-color: #e67e22; }
        #gsiBtn     { background-color: #2980b9; }
        #hazardBtn  { background-color: #c0392b; }
        #konjakuBtn { background-color: #795548; }
        #osmBtn     { background-color: #f39c12; }
        #clearBtn   { background-color: #6c757d; }

        footer {
            text-align: center;
            margin-top: 3em;
            color: var(--muted-text-color);
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🗺️ なまあず地図連携ツール<span class="version">Ver.1.3</span></h1>
        <a href="https://namazu-honpo.com/?page_id=5159" target="_blank" rel="noopener noreferrer">その他の建築系便利アプリはこちら</A>
        <p>
            GoogleマップのURLを貼り付けると、同じ場所を様々な地図サイトで開くことができます。<BR>
　　　　　　注意：Googleマップで地名や住所を検索した直後のURLでは位置データが含まれず検索出来ません。地図が表示されたら、地図上を少しだけドラッグして動かしたりして緯度・経度情報が追加されたら、そのURLをコピーしてご利用ください。
        </p>

        <input type="text" id="urlInput" placeholder="ここにGoogleマップのURLを貼り付けます...">
        
        <div class="button-group">
            <button id="jibanBtn" class="linkButton">
                <svg viewBox="0 0 24 24"><path d="M12,2A10,10,0,0,0,2,12A10,10,0,0,0,12,22A10,10,0,0,0,22,12A10,10,0,0,0,12,2M12,4A8,8,0,0,1,20,12H18A6,6,0,0,0,12,6V4M4,12A8,8,0,0,1,12,4V6A6,6,0,0,0,6,12H4M12,18A6,6,0,0,0,18,12H20A8,8,0,0,1,12,20V18Z"></path></svg>
                地盤サポートマップ
            </button>
            <button id="gsiBtn" class="linkButton">
                <svg viewBox="0 0 24 24"><path d="M12,12L14.3,21.5L20.2,4.8L4.5,10.7L12,12M12,12L10,18.9L8.7,13.8L3.6,12.5L12,12Z"></path></svg>
                地理院地図
            </button>
            <button id="hazardBtn" class="linkButton">
                <svg viewBox="0 0 24 24"><path d="M12,1L21.5,21H2.5L12,1M12,6L5.5,19H18.5L12,6M13,10V14H11V10H13M13,16V18H11V16H13Z"></path></svg>
                重ねるハザードマップ
            </button>
            <button id="konjakuBtn" class="linkButton">
                <svg viewBox="0 0 24 24"><path d="M12,20A8,8,0,0,1,4,12A8,8,0,0,1,12,4A8,8,0,0,1,20,12A8,8,0,0,1,12,20M12,2A10,10,0,0,0,2,12A10,10,0,0,0,12,22A10,10,0,0,0,22,12A10,10,0,0,0,12,2M12,7L9.5,9.5L12,12L14.5,9.5L12,7M7.5,12L10,14.5L7.5,17L5,14.5L7.5,12M16.5,12L19,14.5L16.5,17L14,14.5L16.5,12Z"></path></svg>
                今昔マップ
            </button>
            <button id="osmBtn" class="linkButton">
                <svg viewBox="0 0 24 24"><path d="M12,2C15.86,2 19,5.13 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9C5,5.13 8.13,2 12,2M12,4A5,5,0,0,0,7,9C7,10,7,12,12,18.71C17,12,17,10,17,9A5,5,0,0,0,12,4M12,11.5A2.5,2.5,0,0,1,9.5,9A2.5,2.5,0,0,1,12,6.5A2.5,2.5,0,0,1,14.5,9A2.5,2.5,0,0,1,12,11.5Z"></path></svg>
                OpenStreetMap
            </button>
            <button id="clearBtn" class="linkButton">
                <svg viewBox="0 0 24 24" fill="currentColor" style="width: 1.2em; height: 1.2em;"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>
                入力内容を消去
            </button>
            <a href="https://cityzone.mapexpert.net/" class="linkButton" role="button">用途地域マップ(Linkのみ)</a>
            <a href="https://jishinfo.net/map/" class="linkButton" role="button">地震インフォ(Linkのみ)</a>
            <a href="https://disaportal.gsi.go.jp/hazardmapportal/hazardmap/bousaimap/index.html" class="linkButton" role="button">わがまちハザードマップ(Linkのみ)</a>
            <a href="https://agora.ex.nii.ac.jp/digital-typhoon/weather-chart/" class="linkButton" role="button">デジタル台風(Linkのみ)</a>
            <a href="https://tenki.jp/thunder/" class="linkButton" role="button">雷レーダー(Linkのみ)</a>
            <a href="https://namazu-honpo.com/?page_id=5159" class="linkButton" role="button">戻る</a>
        </div>
    </div>

    <footer>
        <p>提供：株式会社なまあず本舗　自由にお使いください。このツールを使ったいかなる損害も保証しません。Ver.1.1でアドレス消去ボタン設置 Ver.1.2で開けない形式を少なくしました</p>
    </footer>

<script>
        // GoogleマップのURLから緯度、経度、ズームレベルを抽出する関数（'m'と'z'の両方に対応）
function parseGoogleMapsUrl(url) {
    let lat, lon, zoom;

    // ① @緯度,経度,ズーム(mまたはz)形式を探す
    let match = url.match(/@(-?\d+\.?\d*),(-?\d+\.?\d*),(\d+\.?\d*)([zm])/);
    if (match) {
        lat = parseFloat(match[1]);
        lon = parseFloat(match[2]);
        const value = parseFloat(match[3]);
        const type = match[4];
        zoom = (type === 'z') ? parseInt(value) : metersToZoom(value);
        return { lat, lon, zoom };
    }

    // ② !3d緯度!4d経度形式を探す（住所検索直後など）
    match = url.match(/!3d(-?\d+\.?\d*)!4d(-?\d+\.?\d*)/);
    if (match) {
        lat = parseFloat(match[1]);
        lon = parseFloat(match[2]);
        // デフォルトズームを適当に設定（例: 17）
        zoom = 17;
        return { lat, lon, zoom };
    }

    return null; // 座標が取れなかった場合
}

        // メートル(m)をズームレベル(z)に変換する関数
        function metersToZoom(meters) {
            if (meters > 4000) return 14;
            if (meters > 2000) return 15;
            if (meters > 1000) return 16;
            if (meters > 500) return 17; // 府中駅の832mはこの辺り
            if (meters > 250) return 18;
            if (meters > 120) return 19;
            if (meters > 60) return 20;
            return 21;
        }

        // 各ボタンにクリックイベントを設定
        document.getElementById('jibanBtn').addEventListener('click', () => { openMap('jiban'); });
        document.getElementById('gsiBtn').addEventListener('click', () => { openMap('gsi'); });
        document.getElementById('hazardBtn').addEventListener('click', () => { openMap('hazard'); });
        document.getElementById('konjakuBtn').addEventListener('click', () => { openMap('konjaku'); });
        document.getElementById('osmBtn').addEventListener('click', () => { openMap('osm'); });
        
        document.getElementById('clearBtn').addEventListener('click', () => {
            document.getElementById('urlInput').value = '';
            document.getElementById('urlInput').focus();
        });

        // 実際に地図を開く処理を行う関数
        function openMap(mapType) {
            const url = document.getElementById('urlInput').value;
            if (!url) {
                alert('URLを入力してください。');
                return;
            }

            const coords = parseGoogleMapsUrl(url);
            if (!coords) {
                alert('Googleマップの有効なURLではないようです。\nURLに「@緯度,経度,数値z」または「@緯度,経度,数値m」が含まれているか確認してください。');
                return;
            }

            let newUrl;
            switch(mapType) {
                case 'jiban':
                    newUrl = `https://sumaken.j-shield.co.jp/supportmap/#${coords.zoom},${coords.lat},${coords.lon}`;
                    break;
                case 'gsi':
                    newUrl = `https://maps.gsi.go.jp/#${coords.zoom}/${coords.lat}/${coords.lon}/`;
                    break;
                case 'hazard':
                    newUrl = `https://disaportal.gsi.go.jp/maps/index.html?ll=${coords.lat},${coords.lon}&z=${coords.zoom}`;
                    break;
                case 'konjaku':
                    newUrl = `https://ktgis.net/kjmapw/kjmapw.html?lat=${coords.lat}&lng=${coords.lon}&z=${coords.zoom}`;
                    break;
                case 'osm':
                    newUrl = `https://www.openstreetmap.org/#map=${coords.zoom}/${coords.lat}/${coords.lon}`;
                    break;
            }

            window.open(newUrl, '_blank');
        }
    </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-7855061578893179"
     data-ad-slot="8574377639"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>
</body>
</html>