官網『Store Locator 門市據點查詢』設計完整攻略：中小企業如何用一張互動地圖，把在網路上找店的客人真的帶進店裡
客人查完地址仍不知道怎麼去、打電話問你營業時間？一頁做好的門市據點查詢，比 Google 搜尋更能把客人接回你自己的網站。
先想一個場景
假設你是一位下午三點想燙頭髮的客人，剛在 Instagram 看到一家看起來不錯的美髮沙龍。點進他們的官網，你第一個想知道的是：「這家店離我近嗎？今天有開嗎？我要怎麼去？」
如果官網只丟一行地址「桃園市中壢區中正路 xxx 號」，你多半會關掉頁面，直接去 Google Maps 搜。表面看只是少了一個小功能，實際上這位客人已經從你的品牌世界，跳到 Google 的搜尋結果裡，接下來會看到什麼？——旁邊三家同類型的店、鋪滿五星評論的競爭對手、甚至外送平台的優惠。你辛辛苦苦把人吸引到官網，最後卻把他免費送給對手。
這就是為什麼「Store Locator 門市據點查詢」絕對不只是「地圖 + 地址」而已。它是官網把線上訪客真的變成走進店裡客人的最後一哩路。今天這篇文章就把這個常被中小企業忽略的頁面拆開來，帶你看整套怎麼做。
Photo by Ilker Ozmen on Unsplash
一、哪些公司特別需要 Store Locator？
不是每家公司都要做地圖，但下面幾種情境，只要漏掉這一頁基本上就是白白丟客戶：
- 連鎖或多門市品牌：手搖飲、餐飲、美髮、健身房、按摩、寵物店、藥局。客人一定會問「離我最近的在哪」。
- 經銷 / 授權店家分布廣的品牌：家電、家具、汽車輪胎、運動用品、健康食品。客人想線下實機看再下單。
- 服務型單一據點但客人常來現場：診所、律師事務所、汽車保養廠、婚紗攝影棚。地圖 + 路線指引比只寫地址高效十倍。
- 展場、快閃店、期間限定活動：需要清楚告訴大家「幾號到幾號在哪」，一頁做好還能重複用。
如果你的生意型態符合上面任一種，這頁不做就是把生意送走。
二、一個合格的 Store Locator 頁面，長什麼樣？
拆開來看，其實核心就是三塊：
- 搜尋 / 篩選區：讓客人輸入地區、郵遞區號，或用「使用我的定位」自動抓 GPS。
- 地圖區：Google Maps 或其他地圖服務，把店家用大頭針標出來。
- 清單區：地址、電話、營業時間、可停車、可預約、Google 評分等資訊條列式呈現。
看似簡單，但真正做得好的版本，還會做到幾件事：清單和地圖聯動（點左邊的店，右邊地圖會跳過去）、依距離自動排序、可以直接開啟導航、直接撥打電話、直接加入 LINE，甚至直接預約。每多一個摩擦點，客人就少一位。
三、設計時最常被忽略的五個細節
1. 手機優先，不是桌機優先
八成以上會查門市的訪客是用手機。可是很多網站的地圖頁在手機上，地圖佔滿整個螢幕、清單被壓到最下面，或者反過來清單擋住地圖，兩邊都很難操作。
正確做法是：手機版預設看清單、地圖收在上方一小塊；點某一家店才展開大地圖與導航按鈕。桌機版則採左右分割（左清單、右地圖），因為螢幕寬夠、可以同時看到。
2.「使用我的定位」按鈕要顯眼
比起手動打地址，讓客人一鍵抓 GPS 是體驗差距最大的一環。這顆按鈕要放在搜尋框旁邊，還要順便加一句提示：「我們只用來找最近門市，不會儲存你的位置」，降低授權時的心理阻力。
3. 顯示的資訊要以「客人現在會問的問題」為主
常見錯誤是把公司內部管理欄位（店號、內部編號、店長姓名）也搬到前台。客人根本不在乎。他們關心的是：
- 今天有開嗎？幾點開到幾點？
- 有停車嗎？停車費怎麼算？
- 要預約嗎？可以現場排隊嗎？
- Google 評分幾分？
- 可以刷卡 / LINE Pay / 街口嗎？
用 icon 呈現這些欄位（🚗 停車、💳 刷卡、📅 預約），比一大段文字有效太多。
Photo by unavailable parts on Unsplash
4. 地圖大頭針不要一模一樣
如果門市多，全部都用一樣的紅色針，客人根本分不出來。可以依「營業中／已打烊／即將打烊」用不同顏色。有旗艦店、體驗店的話再用另一種 icon 區分。這件事幾乎不加成本，客人卻能一眼看懂。
5. 靜態備援：地圖掛掉時，仍要能看到門市資訊
Google Maps 有時會超出免費額度、API Key 設定錯誤、或使用者網速太慢載不出來。這時候如果整頁只剩下一塊灰白色的空白，客人就跑光了。
應對做法是：清單資料獨立於地圖，就算地圖沒載入，客人還是能滑動清單、看到地址、點電話直接撥出。這是很基本的「Graceful Degradation 優雅降級」，卻是九成公司會忽略的細節。
四、SEO 順便做起來：一個店，一頁
如果門市不多（10 家以內），除了主要的 Store Locator 頁，強烈建議每一家門市各自有一個獨立網址，例如 /store/taoyuan-zhongli。理由：
- Google 會把每一頁當成一個「本地商家」的資料源，配合 Schema.org 的 LocalBusiness 結構化資料，很容易被抓進在地搜尋結果。
- 客人搜「桃園中壢 xxx 店」時，會直接命中你的頁面，而不是丟到 Google 商家頁面裡跟評論混在一起。
- 每一家店的頁面可以放專屬照片、專屬活動、專屬預約表單，行銷素材有地方放。
這是官網經營裡「一次投入、長期複利」的典型例子。前期一家店寫個 300 字介紹加 5 張照片，後面 Google 會慢慢幫你把在地流量帶進來。
五、實作上要注意的成本與地雷
Google Maps API 不是完全免費
Google Maps Platform 每個月有免費額度（近年約 US$200 的信用額度），一般中小企業月流量都在額度內，但一定要記得：
- 後台一定要限制 API Key 的使用網域（HTTP referrer），避免被別人盜用刷爆你的信用卡。
- 設定計費警示（budget alert），超過某個門檻就寄信通知你。
- 如果只是要顯示一張靜態地圖 + 幾個點，可以考慮用 Static Maps API 或直接嵌入
<iframe>分享連結，成本近乎零。
不一定要用 Google，替代方案很成熟
近年開源與商業替代品其實不少：Mapbox、Leaflet + OpenStreetMap、國內的 NLSC（國土測繪中心圖資）等。若門市較密集，其實 Leaflet + OSM 是完全免費的方案，效果不輸 Google，只是要多花一點工程時間。
資料要「一次改、處處生效」
營業時間、電話、地址這三樣，是最會變動也最會出錯的資料。做法上建議做一個簡單的後台，讓門市資料集中管理，同時同步到：Store Locator 頁、Google 商家、Facebook、LINE 官方帳號的資訊區塊。不要每次改都要工程師改 code。這一點，是「網站」跟「網站 + 內部小工具」的差別，也是官網長期成本能不能壓下來的關鍵。
Photo by Declan Sun on Unsplash
六、幾個容易忘記的加分細節
- 「複製地址」按鈕：客人習慣複製地址貼到 Google Maps 或 Uber 上叫車，一顆按鈕就搞定。
- 「加入我的最愛」（用瀏覽器本地儲存）：常回購的客人下次直接看到自己常去的那家。
- 營業時間支援節假日切換：中秋、農曆春節、颱風提早打烊，這種訊息如果只寫在 FB 動態消息，官網和地圖服務都看不到，客人白跑一趟是最容易被留負評的事。
- 加入路線引導的一鍵按鈕：手機點下去直接開 Google Maps / Apple 地圖導航，減少「複製 → 開 App → 貼上」的操作步驟。
- 提供 Google 地圖評分連結：讓真正滿意的客人幫你留評分，這是最便宜也最有效的社會證明累積方式。
七、結語：這頁不是選配，是官網最容易被低估的成交入口
很多中小企業會花大錢做首頁動畫、做華麗的商品輪播，卻在 Store Locator 這一頁只留一段死死的地址跟一組電話。結果是：真的準備要來店裡消費的客人（也就是購買意願最強的那群），反而在最後一步被丟包。
從投報率的角度看，這頁投入的成本很低，換來的效果卻很直接——訪客不用跳出你的網站，就能決定「今天就去」。這才是官網作為「自家門面」的意義。
如果你的品牌有實體門市、有多個服務據點，或是打算做在地經營，請把 Store Locator 這一頁當成首頁一樣認真對待。它不是設計師的美學展示，而是把線上流量真正轉成線下業績的最後一道橋。
下次改版官網時，先問自己一句：「客人查到我家店之後，離出門的距離還有幾步？」——這個答案，就是你這頁能不能賺錢的關鍵。