你可以透過"地圖"工具加入地圖。
You can click "Map" in widget bar to add a map.
*注意：個別地圖定位插件需另行參與其額外收費計劃。*
*Notice: Some Map tools are now required additional service charged by map provider.*
詳情請參閱 For details：
Google Cloud: https://cloud.google.com/maps-platform/pricing/?hl=zh-TW
地圖插件使用方法 Map Tool
*支援Google. 百度 Baidu, Open Street Map。
在選擇地圖後，點擊地圖插件後，右方就會出現設置內容
After choosing the map, click the map > the settings will appear on the right.
你必須到該地圖的官方網站取得地圖API Key。否則地圖將不能顯示。
You must get API key from Map provider and add to the map tool.
如何獲取API key How to obtain an API key
-
百度 Baidu: 請前往 https://lbsyun.baidu.com/ 按指示獲取百度地圖API Key。
Please go to https://lbsyun.baidu.com/ and follow the instructions to obtain a Baidu Maps API Key.
-
Google: 請前往 https://developers.google.com/maps/documentation/embed/get-api-key 按指示獲取Goggle API Key。
Please go to https://developers.google.com/maps/documentation/javascript/get-api-key and follow the instructions to obtain a Google Maps API Key.
OpenStreetMap 使用方法 How to use OpenStreetMap
- 先找到該地址的座標，如果是Google Map的話，在地圖上於該確切位置按右鍵，會出現一個彈出式選單，點擊座標即可複製
First, find the coordinates of the address. If you are using Google Maps, right click the exact spot on the map and you shall see a pop-up menu > click on the coordinates to copy -
於地圖插件的設置內容中貼上座標
Paste the coordinates on map setting
上載地圖圖片 Upload Map Picture
將地圖截圖，並以圖片方式顯示在網頁。
Capture a screenshot of the map and display it on the webpage as an image.
- 於web builders menu中點擊"圖片"工具。 Click "Pictures" in widget bar.
- 點擊預設大小的圖片。 Click the Default size.
-
點擊"上傳新圖片"。Click "Upload New Picture".
- 選擇電腦中已儲存的地圖圖片。Select a map image saved on your computer.
透過自訂 HTML 將 Google 地圖嵌入網站 Embed Google Maps into the website using custom HTML
- 於web builders menu中點擊"進階"工具。 Click "Advanced" in widget bar.
- 點擊"Custom HTML"。Click "Custom HTML".
- 使用Google Map找到地址後按分享。
Find the address on Google Maps and then click "Share".
- 點擊"嵌入地圖"＞ 複製 HTML。Click on Embed a map > COPY HTML
- 點擊插件，於設置內容中點擊Click to edit script。
Click the element, and in the settings panel, click "Click to edit script".
- 貼上從 Google 地圖複製的 HTML ＞ 應用
Paste the HTML you copy from Google Map > Apply
- 取消勾選"在建站助手中不顯示內客"後調整地圖大小。
Un-tick "Deactivate content while in builder" then adjust the map size.
-
勾選"在建站助手中不顯示內客"。
Tick "Deactivate content while in builder".
常見問題 FAQ
1. 百度 Baidu, Google 地圖錯誤 map error
無法顯示地圖
請檢查你是否已經加入了地圖的API key (點擊地圖插件後，右方就會出現設置內容)。
如你的網站有多於一個地圖，你必須在*每個地圖插件*加上API Key。
Please check - have you inserted Maps API key to map's properties (click the map > the settings will appear on the right).
If you have more than one map on your page, you need to insert API key in all maps.
2. This page can't load Google Maps correctly.
如果你見到以上錯誤，你需要登入Google console 檢查帳戶設定。
你可以按此進入Google Maps Platform修復地圖。
If you encounter the above error, you need to log in to the Google Console to check your account settings.
You can click here to go to Google Maps Platform to fix the map
為了查看問題的詳細資訊，請在包含 Google 地圖的網站頁面中打開瀏覽器的開發者主控台（通常按 F12），並切換到「Console」分頁。在那裡你應該可以看到來自 Google 的紅色錯誤訊息，內含問題的詳細說明
In order to see details of the problem open Developer console in browser on your website page with Google map (usually key F12) and switch to tab "Console". There you should see red error message from Google with problem details.
常見錯誤代碼 Common Error Codes
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
