如何替自己網站增設一個商家地圖─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【網站製作經驗】

網站製作經驗

第九篇
如何替自己網站增設一個商家地圖

壹、什麼是商家地圖？
商業網站上經常會用到聯絡我們、公司介紹等等選項，目的是指引客戶快速且順利的找到商家的公司地點。
這與網站地圖或索引有所不同，網站地圖是指該網站的架構與選項配置，目的是讓訪客順利瀏覽該站內容。
早期商家地圖製作方式，不外使用繪圖軟體自己描繪出相關位置，或以掃瞄器將現有地圖掃為圖檔來使用。
後來 Flash 出現，網頁設計師為了讓客戶瞭解商家區域位置關係，會以動畫的方式來製作動態商家地圖。
將商家地圖放置在網站上，訪客就可以從靜態或動畫的地圖了解該商家所在地點，以及附近周邊地理位置。
除了一般靜態地圖外，Yahoo! 奇摩生活、智邦網、 Google 地圖、 yam 生活地圖等等，還提供動態地圖。
動態地圖可以讓網友的滑鼠在圖面上一點，地圖就會移動、放大或縮小、切換不同的圖層、設定起止位置。
使用商家登錄中心可以完全免費建立您的商家資料，非常的容易，而且免費，您甚至不需要有自己的網站。
當客戶搜尋本地地圖資訊時，便會找到您商家相關資訊，包括您的地址和營業時間，甚至店面或產品相片。
這麼好用而且完全免費的網路工具，不論您是否屬於網站製作者、商家、個人 Blog ，都值得您親自體會。
善用這些免費地圖服務，除了可以增加自己網站的曝光率外，更可以省下不少製作商家地圖的費用與時間。
以下就以谷歌地圖 (Google My Maps) 與 Yahoo! 奇摩生活商家地圖，分別舉例詳細介紹給大家快樂使用。

貳、製作 Google My Maps 具備條件：
在您對這一篇報導產生有興趣的開始之前，強烈建議：具備基本的 HTML 標籤對您學習網頁有極大幫助。
除此之外 Google Maps API 教程中，也建議您必須略懂 JavaScript 語言，對您的套用會有極大幫助。
如果您完全沒有基礎或概念，也不用害怕，請跟我步驟往下學習，不會很難的，非本站會員不接受諮詢。
本篇報導針對初學者如何製作商家地圖，並以 Google 地圖為範例，其他地圖部份請自行參考相關報導。
首先，你必須要先有一個 Google 帳戶，才能以此申請一個 Maps API 的 key，目的是限制你的使用狀況。
如果沒有 Google 帳戶？您只要自選一組電子郵件地址和密碼，您就可以免費建立一個 Google 帳戶。
如果沒有 Google 帳戶，請先在這裡申請 ( Go ) 一個，已有 Google 帳戶者，請繼續進行下一個步驟。

參、建立 Google My Maps API：
有了 Google 帳戶，你可以在這裡申請 Google Maps API ( 英文或簡體 )，這是使用 Google Map API 必要的動作。
欲註冊使用 Google Maps API (Sign Up for the Google Maps API)，目前 Google 只提供英文與簡體畫面。
Google Map 已經升級至 v2 的版本，如果您沒把握請參考申請 Google Maps API 詳細說明 Go 。

肆、製作地圖方式一 (取得欲標記地點的經緯座標值)：
01.進入 Google Maps 搜尋頁面 Go 。
02.輸入欲標記地點的地址或名稱，按[搜尋地圖] (注意：街弄門牌號碼等數字不可有空格)。
03.確認搜尋位置無誤後，並縮放調整適當的比例，按地圖右邊[連結]，取得第一段內的地圖連結碼。
詳細說明 Go 。
實做範例 Go 。

伍、製作地圖方式二 (套用 Google's AJAX APIs )：
01.我們可以將範例裡面其中的這一段改寫並套用 Google's AJAX APIs 成為 ...。
02.然後使用 google.load 指定在網頁上使用的模組。
03.接下來是使用官方提供的地址解析(轉換經度緯度)功能。
詳細說明 Go 。
實做範例 Go 。

陸、商家地圖與其他特殊製作方式：
直接進入 http://maps.google.com.tw/ 輸入帳號與密碼登入後，編輯自己的地圖。
如果想更進一步在地圖上劃線、標示形狀，或是在對話盒中嵌入相片、文字或視訊的話，可以使用「我的地圖」這個功能。
商家登錄中心 (協助顧客在 Google 地圖上找到您)，每日有數百萬的人搜尋免費商家 Google 地圖資料，讓他們很容易找到您。
詳細說明 Go 。
其他特殊製作方式 Go 。

柒、地圖製作常用參數說明及相關製作文件介紹：
在地圖上您可套用以下任何內置控制件：
map.addControl(new GSmallMapControl()); //加入地圖縮放工具，無拉桿(擇一使用)
map.addControl(new GLargeMapControl()); //加入地圖縮放工具，有拉桿(擇一使用)
map.addControl(new GScaleControl()); //加上比例尺
map.addControl(new GMapTypeControl()); //加入地圖切換類型
map.addControl(new GOverviewMapControl()); //位於又下角可折疊縮略圖
map.setCenter(new GLatLng(25.001689, 121.460809), 8); //設定台灣經度,緯度
map.addControl(new google.maps.LocalSearch()); //加入搜尋功能
map.addMapType(G_NORMAL_MAP); //加入一般道路圖(預設)
map.addMapType(G_SATELLITE_MAP); //加入衛星空照圖
map.addMapType(G_PHYSICAL_MAP); //加入地形圖
map.addMapType(G_HYBRID_MAP); //混合地形圖

Google Maps API 內建四種控制項：
1. GLargeMapControl : 適合給大型地圖的控制項。
2. GSmallMapControl : 適合給小型地圖的控制項。
3. GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。
4. GMapTypeControl : 顯示地圖型態切換的控制項。

設置按鈕 CSS 元素。
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}

相關製作文件介紹 Go 。

捌、Yahoo! 奇摩生活 + 商家地圖：
進入 Yahoo! 奇摩生活+ 網站 Go
以 Yahoo 帳號登錄後，點選免費商家登錄，區分兩種方式，一般商家 (需要審核) 與網有通報。
然後使用 Yahoo! 奇摩地圖 (商家地圖)
以 Yahoo 帳號登錄後，點選商家搜尋，輸入網頁研習室，是不是很容易找到我的服務位置呢？
詳細說明 Go 。

玖、國內外其他提供地圖服務業者：
國內： Go
yam 天空 - 活地圖、 UrMap 你的地圖網、 MSN 互動地圖、 Yahoo! 奇摩即時通訊互動式地圖、台灣電子地圖服務網
台灣景點地圖旅遊導覽 (CTIN 台灣旅遊聯盟)、地圖任逍遙、線上地圖、我的 E 政府-電子地圖、行動導遊電子地圖
PaPaGo Online。

中國大陸： Go
中國大陸 (地圖搜索)、中國大陸 (城市搜索)、中國大陸 (搜狗 Sogou)、中國大陸 (數城網)、澳門地圖 (macau map)。

國外： Go
Yuan.CC Maps、HRW WORLD ATLAS、Expedia Travel、World Atlas。

其他參考： Go
更多線上地圖服務、四種免費線上地圖大剖析。

拾、結論與建議：
⊕本電子報每篇報導至少花了 4 天時間編輯與修改，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報第三階段報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。
⊕一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
⊕為因應網友要求，本報自即日起全面改為索取教材資料方式，繼續提供及服務有此需求網友。
⊕本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
⊕本報導內容或資料，因限人力、時間，非索取教材資料包含線上指導網友，不接受任何疑惑解答，敬請見諒。
⊕對本篇有任何問題，歡迎大家前往網頁教學議題討論版，發表您的看法或建議，讓彼此更能互動受惠。
☆本報導非會員可免費訂閱及享用我的電子報報導成果，而會員則可以進一步取得所有資料與線上指導。
☆本站所有報導資料，歡迎網友免費加入鏈結，但請保留文章完整，並註明此引用來源，謝謝您的支持與配合。

第三階段 97.12.31. 發行第 54 期更多精彩報導文章