使用地圖位置 WordPress 插件託管詳細的谷歌地圖

已發表: 2023-03-30

您知道可以在 WordPress 網站上託管交互式 Google 地圖嗎?

您可能已經知道,只需將 iframe 代碼複製到 HTML 塊中,即可在任何頁面或帖子中嵌入 Google 地圖。 這將顯示您指定的任何區域的地圖。 然而,這是 HTML 嵌入方法的限制。

如果您想在您的 WordPress 網站上將 Google 地圖位置提升到另一個級別,請留下來,因為我將在本文中向您展示具體的操作方法。

但首先,在您的網站上託管 Google 地圖有哪些潛在用途?

其一,您可以用圖釘顯示您公司的位置。 或者,如果您正在計劃一個活動,您可以在活動頁面上顯示確切的位置,以便訪問者可以輕鬆地提前計劃。 假設您有一個旅遊網站,可以向遊客介紹特定城市的最佳博物館。 或者您可以顯示徒步旅行路線並允許用戶輸入他們自己的徒步旅行筆記?

您可以使用 Creative Minds 的 Map Locations WordPress 插件來完成所有這些工作。 讓我們開始吧!

使用地圖位置插件創建獨特的地圖

使用 Map Locations 插件,您可以在 Google 地圖上放置多個位置以及有關該位置的特定信息——加上圖像、視頻、郵政編碼路線和可搜索標記。

使用 Google 地圖集成,您可以使用多個地圖創建一個商店定位系統,創建一個交互式位置目錄。 該插件還允許您為每個位置顯示一個獨特的圖標。

Cm 地圖位置插件 WordPress 頁面的屏幕截圖

此外,該插件還支持:

  • 導入和導出位置
  • 通過郵政編碼搜索位置
  • 使用簡碼嵌入位置
查看地圖位置

地圖位置 WordPress 插件入門

地圖位置插件具有完整的設置菜單,並在您的 WordPress 管理儀表板上託管易於訪問的用戶指南。 配置和設置地圖有幾個重要步驟。 首先是在您的網站上安裝插件。

安裝地圖位置插件

您可以在其 WordPress.org 頁面上找到並下載地圖位置插件。 或者,您可以在插件→添加新下的儀表板中搜索“cm map locations”。

您還可以在 Creative Minds 網站上購買該插件的高級版本之一。

安裝並激活後,您會在左側儀表板菜單中找到一個名為“CM 地圖位置”的新菜單項。

配置插件的第一步是輸入您的 Google Maps API 密鑰。 如果您還沒有,我們現在就來了解一下。

獲取谷歌地圖 API 密鑰

首先,您需要一個 Google 帳戶。 自 2018 年 7 月起,使用 Google 地圖、路線和地點數據還需要您在 Google Cloud 中擁有賬單信息。 但是,您將有機會在創建 API 密鑰時添加該信息。

CM Map Locations→Settings下,您會找到 API 密鑰字段和獲取它的鏈接(如果您還沒有的話)。

地圖位置菜單的屏幕截圖

您將需要幾個 API 密鑰才能使用地圖位置插件:

  • JavaScript API
  • 地理定位 API(對於某些功能;需要 HTTPS)
  • 地理編碼API
  • 地點 API

要獲取這些密鑰,請前往 Google Developers 頁面。

導航到您的項目,或創建一個新項目。

Google Developer 項目菜單的屏幕截圖

接下來,導航到APIs & Services→Library

從列表中選擇一個 API,或使用搜索欄查找我之前提到的 API 之一。 在 API 的彈出菜單中,單擊藍色的啟用按鈕。 對每個 API 重複這些步驟。

啟用所有 API 後,您需要獲取密鑰(您只需要一個)。 在邊欄中,選擇 Credentials,您會在其中看到列出的 API 密鑰。 將 API 密鑰複製到剪貼板 — 稍後您會將其粘貼到您的網站中。

首先,如前所述,您需要為 Google Cloud 啟用計費。 這是 Maps Location 插件正常運行的重要一步。 登錄到您的項目後,單擊左上角的漢堡菜單並選擇計費。 您會收到一條消息,提示您關聯一個計費帳戶。 單擊該按鈕並按照提示進行操作。

現在您已經完成了設置和獲取 Google API 密鑰的所有步驟,請返回您的 WordPress 網站。 在 CM 地圖位置設置頁面中,粘貼您的 Google 地圖 API 密鑰並單擊底部的保存。 如果願意,您可以使用右側的按鈕測試配置。

添加位置

地圖位置插件為訪問者和用戶創建索引頁面。 添加位置後,它將列在這些頁面上。 在添加位置之前,最好為您的地圖至少創建一個類別。

這就像添加一個新的帖子類別一樣簡單,但這些是特定於地圖位置的。 在CM Map Locations→Categories下創建盡可能多的類別。 您還可以為每個類別添加默認標記圖標。

地圖位置菜單的屏幕截圖

創建類別後,您可以添加位置。 您可以使用 CM Map Locations 菜單或單擊管理工具欄中的+ New並選擇Location 。 在新的位置頁面編輯器中,填寫與您所需位置相關的位置名稱和描述字段。

從列表中選擇適當的類別,然後選擇一個標記圖標。 如果您願意,也可以上傳自己的圖標。 接下來,您可以添加關於您所在位置的任何圖像或視頻——這對於旅遊指南網站來說會派上用場。

接下來,向下滾動到頁面上顯示的 Google 地圖。 搜索位置或根據需要移動地圖。 當您看到您的位置時,選擇一種繪圖工具並在地圖上繪製您的位置邊界。

在 Google 地圖上創建地圖位置的屏幕截圖

進一步向下滾動頁面,您會看到自動填充的準確的緯度、經度和您所在位置的地址信息。 如果你喜歡,你可以添加:

  • 電話號碼
  • 網站
  • 電子郵件地址
  • 網址

單擊“保存”按鈕,您的位置將添加到您網站上可用的位置列表中。 查看位置時,您的訪問者將看到格式整齊的信息和地圖。

顯示的聖巴巴拉地圖的屏幕截圖

創建索引頁

索引頁面的目的是顯示帶有代表不同位置的標記的地圖,以及這些位置的可自定義列表。

索引頁面可以配置為顯示有關每個位置的不同信息,例如:

  • 標題
  • 描述
  • 地址
  • 評分。

用戶可以與地圖和位置列表交互以搜索特定位置或瀏覽所有可用選項。

索引頁面還可以包括郵政編碼半徑過濾器等功能以及向每個位置添加自定義 URL 或方向的功能。

使用簡碼顯示地圖

短代碼是特定於 WordPress 的快捷方式,允許用戶向帖子和頁面添加動態功能,例如帶有位置的地圖。

存在不同的簡碼用於各種目的,包括顯示位置的片段、顯示地圖上的特定位置、顯示具有來自類別的位置的地圖以及顯示當前位置地圖。

用戶可以添加參數以使這些短代碼更加具體,例如選擇地圖的主題、寬度和高度或限制顯示的位置數量。

下面是所有短代碼及其參數的列表,以及示例,以便於理解:

位置簡碼:

  1. 片段
    • 簡碼:[cmloc-snippet]
    • 使用:顯示位置的片段。
    • 過濾參數:id
    • 查看參數:特色
    • 示例:[cmloc-snippet id=”487″ featured=”map”]
  2. 具體位置圖
    • 簡碼:[cmloc-location-map]
    • 用途:在地圖上顯示特定位置。
    • 過濾參數:id
    • 查看參數:theme、mapheight、mapwidth、width、showtitle、showdate
    • 示例:[cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. 多地點地圖
    • 簡碼:[cmloc-locations-map]
    • 使用:顯示帶有所選類別位置的地圖。
    • 過濾參數:showonlybyparams、limit、page、category、taxonomy_key
    • 查看參數:theme, list, mapwidth, width, menu, tooltip, map, usertracking, from_date, to_date
    • 獲取參數:bgcolor, bgcolor_filter, time, time_filter, identifier, identifier_filter, from_date, to_date, hours, path
    • 示例 1:[cmloc-locations-map category=”mountains”]
    • 示例 2:[cmloc-locations-map list=left limit=4 page=1 category=”111″]
  4. 當前位置地圖
    • 簡碼:[cmloc-current-locations-map]
    • 使用:顯示當前位置地圖。
    • 過濾參數:limit、page
    • 查看參數:theme、mapwidth、width、tooltip
    • 樣本:[cmloc-current-locations-map]

可以在“簡碼”選項下找到簡碼以供參考。

可用的簡碼

您可以在 CM Map Locations 知識庫的幫助文檔中找到有關設置簡碼和使用簡碼顯示位置的詳細說明。

訪問控制

如果您想讓您的地圖具有交互性,您需要在CM 地圖位置菜單中配置訪問控制。 有多個選項可供訪問。

訪問設置允許管理員控制誰可以查看、查看、創建和更新位置,以及哪些角色可以在上傳圖像時使用媒體庫。

管理員可以從預設選項中進行選擇,例如每個人、登錄用戶或特定用戶角色,例如管理員、編輯、作者、貢獻者或訂閱者。

或者,他們可以創建一個自定義角色並列出允許訪問它的人的能力名稱。

列出位置

這允許您指定誰可以訪問位置索引並蒐索或過濾位置。

查看位置

這決定了誰可以顯示該位置的頁面。

創建位置

選擇誰可以創建位置。

更新自己的位置

選擇誰可以更新位置。

允許使用媒體庫的角色

如果訂閱者俱有 upload_files 功能,他們可以在為某個位置上傳圖像時看到 WordPress 媒體庫選項卡。 如果您想阻止用戶搜索您網站的媒體庫,請確保撤銷特定角色的訪問權限。

對於每個類別,您可以從 WordPress 核心中包含的任何默認角色或指定特定角色的插件提供的角色中進行選擇。

附加功能

我已經介紹了設置和使用地圖位置插件的基礎知識,但還有更多功能可用。

主題

最多有六個主題可供選擇,使您的地點在您的網站上脫穎而出。

瓷磚/層

圖塊或圖層是地圖的一部分,它與地圖的其餘部分分開生成和顯示。

這些圖塊或圖層通常是預先渲染並緩存在服務器上的方形圖像,使它們能夠快速顯示在地圖上,而無需用戶的瀏覽器一次加載整個地圖。

瓦片或圖層用於通過允許在基本地圖頂部顯示附加信息來增強地圖的視覺呈現。 這可以包括標籤、標記和其他數據,可以幫助用戶導航地圖並了解所顯示區域的上下文。

此外,圖塊或圖層還可以通過允許瀏覽器僅加載當前可見的地圖部分而不是一次加載整個地圖來提高地圖的性能。

您可以使用 OpenStreetMap 或其他服務在地圖上添加圖層以顯示交通週期等信息。

地圖上的圖塊疊加示例
地圖上的圖塊疊加示例

這些設置位於“地圖”部分下的“常規”選項卡中。

  • 默認地圖視圖– 選擇默認視圖。 用戶可以隨時更改此設置。
  • 插入磁貼 URL – 添加您選擇的磁貼服務的 URL。 檢查 Tiles – OpenStreetMap Wiki 以獲取更多示例
在地圖上設置圖塊和圖層
在地圖上設置圖塊和圖層

允許訪問者在瀏覽地圖時打開或關閉圖塊。

選擇“圖塊”按鈕以顯示或隱藏圖塊
選擇“圖塊”按鈕以顯示或隱藏圖塊

您甚至可以允許用戶上傳圖塊。

顯示用戶位置

您的用戶可以共享他們的地理位置並將其顯示在地圖上。

休息/API 支持

使用 REST API 從其他網站甚至移動應用程序創建位置。

顯示模板

有多種可用的顯示模板,可讓您輕鬆創建商店定位器、列表或興趣點。

按半徑搜索

您可以從任何國家/地區的郵政編碼搜索定義的半徑。

位智和谷歌方向

當您創建新位置時,Wave 和 Google 方向鏈接會自動添加到列表中。

地圖位置插件的定價

您可以在任意數量的 WordPress 網站上免費安裝和使用地圖位置插件。 它包括您創建任意數量的位置、添加描述和圖像以及在其獨特的地圖上顯示每個位置所需的所有要素。 但是,通過購買高級版本,您可以獲得更多功能。

基本(專業)地圖定位 = 39 美元/年

除了上面列出的基本要素外,您還可以在一個網站上獲得顯示模板、導入/導出、類別支持、天氣信息、訪問控制等。

高級地圖定位 + 路線管理器捆綁包 = 69 美元/年

這一層添加了 Creative Minds 的 Route Manager 插件並將許可證擴展到三個網站。

終極地圖位置 + 地圖路線 + 5 個附加組件 = 119 美元/年

Ultimate 層添加了幾個附加組件和 Map Routes 插件,並具有最多 10 個網站的許可證。

每個層級提供一年的支持並提供 30 天退款保證。

在您的 WordPress 網站上顯示交互式地圖

地圖位置插件使您能夠創建商店位置列表、引導遊客遊覽任何城市,甚至讓用戶創建和調整地圖以滿足他們的需要。 這是 Creative Minds 開發團隊提供的大量產品中的一個插件。

試用地圖位置插件