如何將 Google 地圖嵌入您的網站

已發表: 2022-05-15

幫助客戶或客戶找到您的真實商店對於最大化您的面對面銷售至關重要。 您可以使用 Google 我的商家將您的商家添加到 Google 地圖。 但您也可以將谷歌地圖嵌入您的網站——例如，您的聯繫頁面。

這比聽起來容易。

將 Google 地圖嵌入網站是幫助消費者定位您的企業的一種簡單方法。 每月有超過 1.5 億用戶訪問 Google 地圖，您希望利用這個用戶群。 畢竟，這是尋找企業和公司的首選方式，無論您是客戶、客戶還是潛在員工。

嵌入谷歌地圖，將谷歌地圖嵌入網站

在本文中，我們將解釋如何在網站中嵌入 Google 地圖——無論是公司網站還是本地商店。

提升您的營銷水平！ 立即安排免費諮詢以通過 SEO 和 PPC 增加銷售額！

如何在網站中嵌入谷歌地圖

將 Google 地圖嵌入網站有兩種不同的方法：HTML 代碼或 API 密鑰。

使用 HTML 代碼

谷歌地圖在其係統中集成了“共享或嵌入地圖”功能。 您在網站的 HTML 代碼中使用地圖的 HTML 代碼在頁面上創建指向 Google 地圖的直接鏈接。

  1. 訪問 google.com/maps。
  2. 找到您要嵌入的位置並選擇它。
  3. 單擊左上角菜單選項卡中的三個水平線。
  4. 選擇“共享或嵌入地圖”選項。

您可以使用分享鏈接在社交媒體（如 Facebook 或 Twitter）或其他兼容平台上發送或分享鏈接。
要將鏈接添加到您的網站，請單擊“嵌入地圖”選項卡。

  1. 在彈出菜單的左側下拉選項卡中確定您希望地圖的大小：小、中、大或自定義大小
  2. 選擇“複製 HTML”選項，並將其粘貼到您網站的 HTML 部分。
  3. 您可以將地圖放置在網頁上的任何位置。 但是，嵌入地圖即表示您同意遵守 Google 的服務條款。 您也無法訪問嵌入式地圖中的所有 Google 地圖功能，例如實時交通信息。

推薦博客：增加銷售額的 20 大開箱即用創意以及什麼是 SEO？ 搜索引擎優化初學者指南。

使用 API 密鑰嵌入 Google 地圖

您需要精通編碼才能實現此方法。

第 1 步：生成 API 密鑰

  1. 轉到 Google Cloud Platform 的 Google Maps 部分。
    （設置項目時，您需要啟用 API）
  2. 在左側菜單中，選擇“憑據”。
  3. 單擊“+ 創建憑據”。
  4. 從菜單中選擇“API 密鑰”，然後復制出現的 API（稍後您將需要它）。

第 2 步：創建代碼以使地圖正常運行

  1. 確定頁面的地圖樣式代碼。
    <風格>
     #map {寬度：100%;

    高度：400px；

    背景顏色：灰色；

    }

    </style>

  2. 使用您的業務坐標添加地圖腳本。
    <腳本>函數 initMap() {

    var macc = {lat: <latitude>, lng: <longitude>};

    var map = 新的 google.maps.Map(

    document.getElementById('map'), {zoom: 15, center: macc});

    var marker = new google.maps.Market({position: macc, map: map});

    }

    </腳本>

第 3 步：將 Google 腳本添加到 HTML 文檔中

  1. 將 API 密鑰添加到下面的異步腳本中，替換“YOUR_API_KEY”。
    <腳本異步
    src=”https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap”>
     </腳本>
  2. 將腳本添加到 HTML 文檔中即可完成。

您需要使用 initMap() 函數，因為 Google 需要它來初始化和添加地圖加載位置。 在這個函數內部，它應該包含位置的緯度和經度。

完成後，您就可以準備好響應式地圖供客戶使用。

推薦博客：如何創建可轉化的內容營銷漏斗以及什麼是文案？ 如何通過數字文案增加銷售額。

為什麼要將 Google 地圖嵌入您的網站？

也許您有特定的目的要添加 Google 地圖。 如果沒有，這裡有一些你應該在網站上嵌入谷歌地圖的原因。

查找您的商店

所有本地企業都應優先考慮在其網站上嵌入谷歌地圖。 谷歌地圖的截圖很有幫助，但它們提供的細節水平遠不及完全可操作的嵌入式地圖。 例如，客戶可以滾動查看您的商店離他們家有多遠。

能夠找到您的商店將增加您的店內客流量、銷售額和利潤。 這是一種將您的在線形象與您的實際業務聯繫起來的簡單方法。

推薦的博客：如何獲得新 Shopify 商店的流量、發展業務的品牌意識戰略理念以及適用於小型企業的 5 個有效在線營銷理念。

為您的聯繫頁面增加價值

列出地址是一回事，但您的客戶只會前往谷歌地圖並進行搜索。 我們有一條營銷規則——盡量減少客戶需要採取的步驟。 每一次額外的點擊或搜索都會導致客戶流失。

通過添加嵌入式 Google 地圖應用程序，您可以為您的聯繫頁面增加價值並節省您的客戶時間。 如果您的業務有點偏離，這一點至關重要。

展示路線

一些企業願意提供幫助。 如果您銷售登山鞋或跑步上衣，也許您想推薦步行或跑步供您的客戶嘗試。 （這是一篇出色的博文。）沒有比在 Google 地圖中突出顯示路線更好的方式來顯示此類信息了。

推薦博客：什麼是數字營銷？ 營銷中的數字基礎知識、Google My Business 的好處以及如何為我的網站查找站點地圖。

學習在網站中嵌入谷歌很簡單

它看起來有點令人生畏。 但是，一步一步地閱讀上述指南，您最終會得到一張完美嵌入的地圖，供您的客戶欣賞。 它既方便又實用，還能促進您的業務發展。 值得嘗試 API 技術，因為它可以為您提供比其他選項更多的功能。

當然，如果你真的很苦惱，你可以隨時聯繫專家來幫助。 我們有配置網站和嵌入谷歌地圖的經驗。 我們非常樂意提供幫助。