簡介

CodePeople Post Map是WordPress的外掛，可以在post中快速加入Google Map，並提供基本個人喜好設定（如層級、圖標以及控制選項）。

安裝環境

•  WordPress 3.6.1(台灣版)
  
  
  
  • 官方網站：http://tw.wordpress.org/
  
  
  
  


• CP Google Maps 1.0.1
  
  
  
  • 官方網站：http://wordpress.dwbooster.com/content-tools/codepeople-post-map
  
  
  • 外掛取得：http://wordpress.dwbooster.com/uploads/files/codepeople-post-map.zip
  
  
  • 透過WordPress控制台安裝 (本文採用此方法)
  
  
  
  

開始安裝

1. 安裝WordPress。本文基於WordPress上外掛安裝說明，WordPress請自行安裝。


2. 安裝CP Google Maps

• 方法一：進入WordPress控制台 > 外掛 > 安裝外掛，搜尋 CP Google Maps 並從後台安裝


• 方法二：進入外掛下載頁：http://wordpress.dwbooster.com/content-tools/codepeople-post-map#download 放入自行網站中安裝

使用與設定

1. 安裝完成後在 WordPress控制台 > 設定 > CodePeople Post Map 中可以設定預設地圖選項。[caption id="attachment_240" align="aligncenter" width="730"] CodePeople-Post-Map設定頁面[/caption]


2. 常用設定選項
   
   
   
   • Map zoom: Google map縮放層級1是全世界，18是最詳細的層級，一般鄉鎮約是14 ~ 16層。
   
   
   • Dynamic zoom: 是否允許瀏覽者調整檢視層級。
   
   
   • Map width: 地圖寬度，依照自己的網站調整寬度，可以是數字，也可以是百分比(如95%)
   
   
   • Map height: 地圖高度，依照自己的網站調整高度，內容為數字。
   
   
   • Map align: 地圖在頁面中對齊方式。
   
   
   • Map type: 地圖顯示模式，有街道圖、衛星圖、地形圖或混和。
   
   
   • Map language: 地圖顯示語言，有繁體中文可以選擇。
   
   
   
   


3. 下面還有更多的功能，不過免費版的只有基本功能可以使用


4. 使用時在發文的下方會出現Google Map的插入選項(如圖)[caption id="attachment_241" align="aligncenter" width="808"] CodePeople-Post-Map 在文章中插入地圖[/caption]


5. 使用時可以直接輸入座標(Latitude:緯度、Longitude:經度)，或是在Address輸入關鍵字，點Verify就會出現搜尋結果(右邊地圖會立即顯示)。[caption id="attachment_242" align="aligncenter" width="758"] CodePeople-Post-Map，地圖搜尋與設定[/caption]


6. Location name 是設定要顯示在地圖上的名稱(標題)


7. Location description 是設定地圖上顯示的描述，可以使用超連結
   
   
   
   • 已知問題：當使用超連結如<a href="http://www.taipei-101.com.tw/">台北101</a>發表後，重新載入發文頁面該欄位會出現異常狀況，需要清除並再次輸入才會正常。
   
   
   
   


8. 下面有各種的Marker(標記)可以選擇


9. 最下方把 Use particular settings for this map 打勾，可以針對此貼文的地圖進行個別設定


10. 全部完成後點選 insert the map tag 就可以在文章中插入地圖(會插入在目前的游標處，並出現codepeople-post-map在插入點)[caption id="attachment_243" align="aligncenter" width="778"] CodePeople-Post-Map，插入地圖[/caption]


11. 完成後結果如下[caption id="attachment_246" align="aligncenter" width="730"] CodePeople-Post-Map，顯示結果[/caption]


12. 實際例子如下[codepeople-post-map]