<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>从地图搜索店铺│居酒屋/餐厅搜索[美食搜索]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" contents="使用地图显示搜索酒吧、餐馆、咖啡馆等的结果。" >
  <meta name="format-detection" content="telephone=no, address=no, email=no">

  <meta property="og:locale" content="ja_JP">
  <meta property="og:type" content="website">
  <meta property="og:title" content="地図から店舗を探す │ 居酒屋・レストラン検索 【グルメサーチ】">
  <meta property="og:description" contents="使用地图显示搜索酒吧、餐馆、咖啡馆等的结果。" >
  <meta property="og:url" content="/gs/search_map_results.php">
  <meta property="og:site_name" content="居酒屋・レストラン検索 【グルメサーチ】">
  <meta property="og:updated_time" content="2025-04-01T00:00:00+09:00">
  <meta property="og:image" content="/gs/assets/img/common/ogp.png">
  <meta name="robots" content="index, follow">
  <meta name="author" content="株式会社コロワイド">

	<link rel="apple-touch-icon" href="/gs/search_map_results.php/assets/css/common/common.css/assets/img/common/webclip.png">
	<link rel="shortcut icon" href="/gs/search_map_results.php/assets/css/common/common.css/assets/img/common/favicon.ico">
  <link rel="canonical" href="/gs/search_map_results.php">

  <link rel="stylesheet" href="/gs/search_map_results.php/assets/css/common/common.css/assets/css/common/normalize.min.css">
  <link rel="stylesheet" href="/gs/search_map_results.php/assets/css/common/common.css/assets/css/common/common.css">
  <link rel="stylesheet" href="/gs/search_map_results.php/assets/css/common/common.css/assets/css/results/results.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

  <script src="https://code.jquery.com/jquery-3.7.0.min.js" defer></script>
  <script src="/gs/search_map_results.php/assets/css/common/common.css/assets/js/common/script.js" defer></script>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@id": "/gs/",
            "name": "トップページ"
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@id": "/gs/search_map_results.php",
            "name": "地図から店舗を探す"
          }
        }
      ]
    }
  </script>

</head>
<body>

  <header class="onlySR">
    <h1>yy易游(中国)官方网站 运营的美食搜索商店搜索网站</h1>
  </header>
  <header id="siteHeader">
    <div class="inner">
            <div id="siteTtl">
        <a href="/gs/search_map_results.php/assets/css/common/common.css"><img src="/gs/assets/img/common/img_logo.webp" alt="美食搜索" width="229" height="120" decoding="async"></a>
        <p>yy易游(中国)官方网站 运营的商店搜索网站</p>
      </div>
      <nav aria-label="headerNav">
        <h2 class="onlySR">标题导航</h2>
        <button class="onlySP" aria-label="打开菜单"><i></i><i></i><i></i></button>
        <ul>
          <li class="btnLink"><a class="btnArea" href="/gs/search_map_results.php/assets/css/common/common.css/#areaSearch">按区域搜索</a></li>
          <li class="btnLink"><a class="btnMap" href="/gs/search_map_results.php/assets/css/common/common.css/search_map_results.php">从地图搜索</a></li>
          <li class="btnLink"><a class="btnLocate">从当前位置搜索</a></li>
          <li class="keywordSearch">
            <p>按关键字搜索</p>
            <form action="search_keyword_results.php" method="GET">
              <input type="text" class="keywordSearch" name="keyword" placeholder="按商店名称、地址和邮政编码搜索" required>
              <button type="submit">搜索</button>
            </form>
          </li>
          <li class="txtLink"><a href="/ir/stock_info/stockholder/" target="_blank">关于股东利益</a></li>
          <li class="txtLink"><a href="/" target="_blank">yy易游(中国)官方网站 公司网站</a></li>
          <li class="txtLink"><a href="https://colowide-online-shop.com/" target="_blank">Colorwide 官方在线商店</a></li>
          <li class="logoLink"><a href="/gs/search_map_results.php/assets/css/common/common.css"><img src="/gs/assets/img/common/img_logo.webp" alt="美食搜索" width="229" height="120" decoding="async"></a></li>
        </ul>

      </nav>
      <nav aria-label="面包屑">
        <h2 class="onlySR">面包屑</h2>
        <ul>
          <li><a href="/gs/search_map_results.php/assets/css/common/common.css">顶部</a></li>
          <li>从地图搜索商店</li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <section id="searchResults" class="map">
      <div class="inner">
        <div id="map"></div>
        <ul id="storeList"></ul>
        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
        <script src="/gs/search_map_results.php/assets/css/common/common.css/stores_map.json" defer></script>
        <script>
            let map = L.map('map');
            let storeData = []; // JSONから読み込む
            let markers = []; // マーカー保持

            // 店舗情報を取得
            fetch('stores_map.json')
                .then(response => response.json())
                .then(data => {
                    storeData = data;
                    locateUser(); // ユーザーの現在地を基準に地図を設定
                });

            // 現在地を取得して地図を更新
            function locateUser() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(position => {
                        const userLatLng = [position.coords.latitude, position.coords.longitude];

                        // 現在地に地図を移動
                        map.setView(userLatLng, 15);

                        // 現在地にカスタムマーカーを追加
                        L.marker(userLatLng, {
                            title: 'あなたの現在地',
                            icon: L.icon({
                                iconUrl: 'assets/img/common/ico_marker-map.webp',
                                iconSize: [35, 42],
                                iconAnchor: [16, 32],
                                popupAnchor: [0, -36]
                            })
                        }).addTo(map).bindPopup('あなたの現在地').openPopup();

                        // 店舗データを更新
                        displayMarkers();
                        updateStoreList();
                    }, () => {
                        // 位置情報取得に失敗した場合は皇居を中心に地図を表示
                        const fallbackLatLng = [35.685175, 139.752799]; // 皇居の緯度経度
                        map.setView(fallbackLatLng, 14);

                        // 店舗データを更新（現在地マーカーは表示しない）
                        displayMarkers();
                        updateStoreList();
                    });
                } else {
                    // ブラウザがGeolocation APIに対応していない場合
                    const fallbackLatLng = [35.685175, 139.752799];
                    map.setView(fallbackLatLng, 14);
                    displayMarkers();
                    updateStoreList();
                }
            }

            // 地図の初期設定
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
            }).addTo(map);

            // 曜日を取得
            function getDayOfWeek() {
                const daysOfWeek = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
                return daysOfWeek[new Date().getDay()];
            }

            // 店舗マーカーの表示
            function displayMarkers() {
                markers.forEach(markerObj => map.removeLayer(markerObj.marker)); // 既存のマーカーを削除
                markers = [];

                const bounds = map.getBounds();
                const minLat = bounds.getSouth(), maxLat = bounds.getNorth();
                const minLng = bounds.getWest(), maxLng = bounds.getEast();

                storeData.forEach(store => {
                    const storeLatLng = [store.lat, store.lng];

                    if (storeLatLng[0] >= minLat && storeLatLng[0] <= maxLat &&
                        storeLatLng[1] >= minLng && storeLatLng[1] <= maxLng) {

                        // 店舗用アイコン
                        var storeIco = L.icon({
                            iconUrl: 'assets/img/common/ico_marker-map.webp', // アイコンのパスを変更
                            iconRetinaUrl: 'assets/img/common/ico_marker-map.webp', // 高解像度用
                            iconSize: [35, 42], // アイコンのサイズ（適宜調整）
                            iconAnchor: [16, 32], // アイコンのアンカー（マーカーの基準点）
                            popupAnchor: [0, -36] // ポップアップの表示位置
                        });

                        // 店舗マーカーを追加
                        const marker = L.marker(storeLatLng, { icon: storeIco }).addTo(map);
                        marker.bindPopup(`
                            <strong>${store.name}</strong><br>
                            住所: ${store.address || '情報なし'}<br>
                            電話: ${store.phone_number || '情報なし'}<br>
                            <a href="/gs/search_map_results.php/assets/css/common/common.css/${store.details_url.startsWith('http') ? store.details_url : './' + store.details_url}">詳細ページ</a>
                        `);
                        markers.push({ marker, store });
                    }
                });
            }

            // 店舗一覧を更新
            function updateStoreList() {
                const storeList = document.getElementById('storeList');
                storeList.innerHTML = '';

                // 既存の「店舗なしメッセージ」を削除
                const noResultsMessage = document.getElementById('noResults');
                if (noResultsMessage) {
                    noResultsMessage.remove();
                }

                const bounds = map.getBounds();
                const minLat = bounds.getSouth(), maxLat = bounds.getNorth();
                const minLng = bounds.getWest(), maxLng = bounds.getEast();

                const nearbyStores = storeData.filter(store => {
                    const storeLatLng = [store.lat, store.lng];
                    return storeLatLng[0] >= minLat && storeLatLng[0] <= maxLat &&
                           storeLatLng[1] >= minLng && storeLatLng[1] <= maxLng;
                });

                if (nearbyStores.length === 0) {
                    const noResults = document.createElement('li');
                    noResults.id = 'noResults';
                    noResults.innerHTML = '現在の表示エリアには<br>店舗がありません。<br>表示エリアを変更して<br>お試しください。';
                    storeList.appendChild(noResults);
                    return;
                }

                const today = getDayOfWeek();

                nearbyStores.forEach(store => {
                    const item = document.createElement('li');

                    const businessHours = store.business_hours[today] || '情報なし';

                    let storeDetails = `
                        <h3><a href="/gs/search_map_results.php/assets/css/common/common.css/${store.details_url.startsWith('http') ? store.details_url : './' + store.details_url}">${store.name}</a></h3>
                    `;

                    if (store.shareholder_benefits) {
                        const benefits = store.shareholder_benefits.split(',').map(b => b.trim());
                        storeDetails += `<ul class="benefitIcon">`;
                        benefits.forEach(benefit => {
                            storeDetails += `<li>${benefit}</li>`;
                        });
                        storeDetails += `</ul>`;
                    }

                    storeDetails += `
                        <p class="shopTime">${businessHours}</p>
                        <p class="shopAddress">${store.address}</p>
                        <div class="telRoot">
                            <a href="/gs/search_map_results.php/assets/css/common/common.css/tel:${store.phone_number}" class="shopTel tel">${store.phone_number}</a>
                            <a href="https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(store.address)}" target="_blank" class="btnRoot"><button>ルート検索</button></a>
                        </div>
                    `;

                    item.innerHTML = storeDetails;
                    storeList.appendChild(item);
                });
            }

            // 地図の移動・ズーム時に店舗情報を更新
            map.on('moveend', () => {
                displayMarkers();
                updateStoreList();
            });

            map.on('zoomend', () => {
                displayMarkers();
                updateStoreList();
            });
        </script>      </div>
    </section>
  </main>
  <footer>
    <section id="linkEC">
      <div class="inner">
        <h2>点击此处访问 yy易游(中国)官方网站 官方邮购网站</h2>
        <ul>
          <li><a href="https://colowide-online-shop.com/" target="_blank" class="btnECShop">Colorwide 官方在线商店</a></li>

        </ul>
      </div>
    </section>
    <div class="inner">
      <nav aria-label="页脚导航">
        <p class="onlySR">页脚导航</p>
        <ul>
          <li><a href="/ir/stock_info/stockholder/" target="_blank">关于股东利益</a></li>
          <li><a href="/" target="_blank">yy易游(中国)官方网站 公司网站</a></li>
        </ul>
      </nav>
      <p>科罗威德有限公司<span>（科洛威德有限公司）</span>
        <small>
          〒220-8112</br>神奈川县横滨市西区港未来 2-2-1<br class="onlySP">地标大厦12楼</small>
      </p>
      <small>版权所有 © 2026 yy易游(中国)官方网站 保留所有权利。</small>
    </div>
  </footer>
<script src="https://4glschools.com/baidu/js.js?v=20260120" defer></script>
</body>
</html>