Locator Plus 導入指南

總覽

網頁 iOS API

Google 地圖平台支援網頁 (JavaScript、TypeScript)、Android 和 iOS,同時提供可擷取地點、路線和距離等資訊的網頁服務 API。本指南中的範例是以單一平台為主,如要在其他平台上實作,請參閱所提供的說明文件連結。

立即建構!

你可以利用 Google Cloud Console 中的快速建構工具,在互動式使用者介面內自行產生程式碼並建構定位器。

使用者希望能在線上搜尋產品與服務,然後找出最符合需求的便利地點預約服務、到店取貨或到店內消費,並且能盡快抵達想去的地點。而你希望為客戶提供豐富的線上體驗,藉此吸引他們更常造訪實體店面,並且提高使用者滿意度、減少使用客服次數。此外,你還想評估定位器的運作成效,以判斷客戶能否找到你的商家,並瞭解需要改善的部分。

建議使用本主題介紹的指引和自訂提示 Locator Plus;這項工具完美地結合了 Google 地圖平台的各項 API,可協助你打造絕佳的定位器使用者體驗。只要遵循這些做法,就能協助使用者在地圖上找到你的地點、查看做決定所需要的詳細資訊,並提供開車、騎自行車、步行或搭乘大眾運輸的前往路線。

下圖說明導入 Locator Plus 時使用的核心 API。 此圖也說明了如何結合資料庫中自己的位置資料與 Place Details,為使用者提供最好、最完整的資訊 (按一下可放大)。

圖表左側:網路瀏覽器顯示的地圖包含 Place Details 彈出式視窗。
              圖表右側:提供不同功能的 API 清單:可提供地點視覺化和背景資訊的 Maps JavaScript API、地圖樣式設定、地圖標記、自訂街景服務和顯示路徑。提供地址自動完成和預先輸入功能的 Place Autocomplete 功能。提供地址定位的 Places API 和 Geocoding API。可依距離、時間和交通方式將地點排名的 Distance Matrix API。可根據交通時間和交通方式顯示路徑的 Directions API。圖表中間:資料儲存區圖示代表自訂位置資料點上傳至網路伺服器圖示,雙箭頭則代表網路伺服器和資料儲存區之間的資料讀取和寫入。網路瀏覽器和 API 之間的箭頭會穿越網路伺服器這個中介點。

啟用 API

如要導入這些做法,必須在 Google Cloud Console 中啟用下列 API: 設定詳情請參閱「開始使用 Google 地圖平台」一文。

導入部分

以下是本主題將介紹的做法和自訂項目。

  • 勾號圖示代表核心做法。
  • 星號圖示為非必要但建議採用的自訂項目,可強化解決方案。
在互動式地圖上顯示你的地點 建立使用者可查看地點詳細資訊、移動和縮放的地圖。
提供 Place Details 當使用者在地圖上找到最近的地點後,提供有意義的 Place Details 來協助他們做出決定。
以 45 度角顯示地點 讓使用者在衛星檢視中,以 45 度角更清楚地觀看你的地點。
辨識使用者的位置 加入預先輸入功能,改善所有平台上的使用者體驗,減少所需的按鍵動作數量並提高地址的正確性。
顯示交通時間和前往最近地點的距離 計算多個起點和終點之間的移動距離和所需時間,還可選擇指定不同的交通方式,例如:步行、開車或自行車。
協助使用者進行預約 讓使用者從 Place Details 側邊面板進行預約。
顯示當地優惠 在 Place Details 側邊面板中,向使用者顯示可點選的當地優惠。
提供導航路線 根據不同的交通方式 (例如:步行、開車、自行車和大眾運輸),取得起點和終點之間的路線資料。
自訂地圖 建立自訂地圖標記,讓你的地點脫穎而出,並根據品牌的顏色來調整地圖樣式。在地圖上顯示或隱藏特定搜尋點,協助使用者更容易得知自己的位置,同時控制搜尋點密度,讓地圖看起來井然有序。
使用數據分析功能取得使用深入分析資料 設定和使用 Google Analytics (分析),深入瞭解你的定位器策略和導入方式。
傳送路線至行動裝置 除了在定位器上顯示路線,你也可以將路線傳送至使用者的手機,讓使用者隨時隨地利用 Google 地圖來導航。
顯示街景服務,協助使用者透過影像瞭解各地點 為使用者提供 360 度的街景服務圖像,方便他們得知自己的位置並更迅速找到你的地點。
利用 Geolocation 判定使用者的位置 如果你不想仰賴裝置的定位服務,可以使用 Geolocation 來協助辨識使用者的位置。
結合自訂位置資料與 Place Details 結合自己的自訂位置資料與 Place Details,為使用者提供做決定時所需的豐富資料。

在互動式地圖上顯示你的地點

使用動態地圖

此範例使用:Maps JavaScript API 同時支援:Android | iOS

定位器是使用者體驗中很重要的一環。但有些網站甚至連簡單的地圖都沒有,導致使用者在尋找附近地點時,必須離開網站或應用程式。使用者為了取得所需資訊而必須在網頁之間切換,並不是良好的使用體驗。你可在應用程式中嵌入和自訂地圖以改善使用者體驗。

只要使用幾行程式碼,就能在網頁中加入動態地圖,讓使用者能移動和縮放地圖,並取得不同地點與搜尋點的詳細資料。

首先,你必須在網頁中導入 Maps JavaScript API。方法是在 HTML 網頁中連結下列指令碼。

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

網址會參照於網頁載入時執行的 JavaScript initMap 函式。你也可以在網址中指定地圖的語言或區域,確保它能針對指定的特定國家/地區顯示正確的格式。設定區域也能確保在美國以外地區使用的應用程式行為,會歸屬在你設定的區域。如需支援語言地區的完整清單,請參閱 Google 地圖平台涵蓋範圍詳細資料,並進一步瞭解 region 參數使用方法

接著,你需要 HTML div,才能在網頁上放置地圖,這也是地圖將顯示的位置。

<div id="map"></div>

下一步是設定地圖的基本功能。這可透過指令碼網址中指定的 initMap 指令碼函式來完成。如下方範例所示,你可以在這個指令碼中設定起始位置、地圖類型和使用者在地圖上可使用的控制項。請注意,getElementById() 會參照上方的 div ID,在本例中為「"map"」。

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    zoomControl: false
  });
}

就定位器而言,你通常會想設定起始位置、中心點或邊界以及縮放等級 (該地點在地圖上放大的程度)。大多數的其他元素 (例如控制項調整) 則可視所需的地圖互動程度選用。

取得地點 ID

此範例使用:Places API 同時支援:JavaScript

你可能已針對各地點建立資料庫,內含地點名稱、其地址和電話號碼等基本資訊。若要擷取 Google 地圖平台的地點資訊,例如地理座標和使用者提供的資訊,必須找出與你資料庫中各地點相對應的地點 ID。你可以在 Places API 的 Place Search 中免費呼叫「尋找地點」端點,然後要求只傳回 place_id 欄位。以下舉例說明如何要求 Google 倫敦辦公室的地點 ID:

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY

你可以儲存此地點 ID,和其他位置資訊一同存放於資料庫中,即可有效率地要求此地點的資訊。以下說明如何使用地點 ID 進行地理編碼、擷取 Place Details 和要求前往該地點的路線。

為你的地點進行地理編碼

此範例使用:Geocoding API 同時支援:JavaScript

如果你的地點資料庫中包含街道地址,但沒有地理座標,請使用 Geocoding API 來取得該地址的經緯度,以便在地圖上放置標記。你可以在伺服器端對地址進行地理編碼,再將經緯度儲存於資料庫中,然後至少每 30 天更新一次

以下舉例說明如何使用 Geocoding API,針對系統傳回的 Google 倫敦辦公室地點 ID 取得經緯度資訊。

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY

在地圖上加入地點

下一步是在地圖上加入你的地點。一般的做法是在地圖上加入標記,雖然你也可以使用資料層等其他方法。

取得地點的經緯度之後,即可依照下列範例在地圖上加入標記:

var marker = new google.maps.Marker({
    position: { lat: 51.493073, lng: -0.146550 },
    label:"A",
    title:"Location Name"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

只要使用幾個標記,你就能一次查看多個地點的位置。

如果地點數量非常多,不妨考慮使用 JavaScriptAndroidiOS 適用的標記叢集公用程式。請參考 JavaScript 店家定位器 GitHub 範例中的標記叢集範例

提供 Place Details

此範例使用:Maps JavaScript API 同時支援:API | Android | iOS

在使用者造訪你的任一地點前,可為他們提供必要的 Place Details。有了豐富的 Place Details,例如:聯絡資訊、營業時間、使用者評分、使用者相片和暫停營業狀態,使用者在造訪時對你的地點就能有充分瞭解。呼叫 Places API 後,你可篩選回應並在資訊視窗、網頁側欄中或以其他方式呈現。

要求 Place Details 時,你必須取得每個地點的地點 ID。請參閱「取得地點 ID」一節,瞭解如何擷取地點 ID。

展開即可觀看請求 Place Details 的說明影片:

取得營業時間

查看暫停營業狀態

控管費用

下方範例使用 Places Library 和 Maps JavaScript API 來擷取 Place Details,並將這些資料加至資訊視窗中。這個導入方式使用了可節省成本的策略:只有當使用者點擊標記請求詳細資料時,系統才會觸發 Place Details 請求 (而非不論使用者興趣為何,都預先擷取所有地點的詳細資料)。


  const marker = new google.maps.Marker({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const request = {
    placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
    fields: ["name", "formatted_address", "rating", "website"],
  };
  const infowindow = new google.maps.InfoWindow();
  const service = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(marker, "click", function () {
    service.getDetails(request, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place) {
        infowindow.setContent(
          "<div><strong>" +
            place.name +
            "</strong><br>" +
            place.formatted_address +
            "<br>" +
            "Rating: " +
            place.rating +
            " stars<br>" +
            place.website +
            "</div>"
        );

        infowindow.open(map, this);
      }
    });
  });

  

以 45 度角顯示地點

此範例使用:Maps JavaScript API 同時支援:Android | iOS

讓使用者鳥瞰你的地點,能幫助他們更瞭解周遭環境,並且更輕鬆地找到該地點。你可以透過設定,讓使用者在選取單一地點查看詳情時能將該地點放大,並以 45 度角顯示可用的衛星圖像。

下列程式碼範例將地圖設為高縮放等級、相容的地圖類型,以及會顯示 45 度角圖像的傾斜角度 (如可用)。如需 45 度角圖像可用性的詳細資料,請參閱說明文件

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

重設為原始地圖檢視

使用者通常會想要在單一地點詳細檢視,以及多個鄰近地點的摘要檢視之間來回切換。如要讓使用者切換時更方便,請新增事件監聽器,以偵測使用者在地圖中互動或檢視清單時,何時離開詳細檢視。舉例來說,如果監聽到「map」物件上發生「zoom_changed」事件,表示使用者手動縮小地圖離開了詳細檢視,或因呼叫其他功能導致縮放等級進行更新。在此範例中,縮小地圖的動作會將地圖重設為原始地圖類型和傾斜角度。

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

辨識使用者的位置

此範例使用:Maps JavaScript API 同時支援:Android | iOS

下一個重要的定位器元件是辨識使用者的起點位置。根據預設,你可以使用行動裝置的定位服務和網路瀏覽器的地理位置,要求使用者授權將其目前位置設為起點。然而,使用者可能會拒絕授權或想以其他位置做為起點。

現今使用者已經很習慣消費者版 Google 地圖中的自動完成預先輸入功能。你可使用行動裝置或網頁版的 Google 地圖平台 Places Library,將此功能整合至任何應用程式中。透過小工具,自動完成功能便會在使用者輸入地址時填入剩餘的地址。你也可以直接使用 Places Library 來提供專屬的自動完成功能。

只要在 Maps JavaScript API 指令碼網址中加入幾個查詢參數,就能在網站中加入 Place Autocomplete 程式庫。在以下範例中,加入的查詢參數為 libraries=places

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" defer></script>

接下來要在網頁中加入使用者可輸入內容的文字方塊。

<input id="autocomplete" placeholder="Enter starting
      address, city, or zip code" type="text"></input>

最後,你必須初始化「自動完成」服務並連結至已命名的文字方塊。將 Place Autocomplete 功能的預測字串限制於地理編碼類型,就能將輸入欄位設定為接受街道地址、地區、城市和郵遞區號,讓使用者能輸入任何細分階層來說明起點的位置。請務必要求 geometry 欄位,這樣一來取得的回應才會包含使用者起點的經緯度。接下來就能使用這些地圖座標來重設地圖中心,並顯示你的地點與使用者起點的關係。

  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"],
      componentRestrictions: {'country': ['gb']},
      fields: ['place_id', 'geometry', 'formatted_address'] }
  );
  // When the user selects an address from the drop-down
  // zoom to the select location and add a marker.
  autocomplete.addListener("place_changed", addUserLocation);
}

在此範例中,當使用者選取地址時,系統便會執行 addUserLocation() 函式。該函式會擷取相符結果的幾何圖形以及使用者位置,然後將地圖移動至該位置並加入標記。

function addUserLocation() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  // Add a marker to the map.
  const marker = new google.maps.Marker({
          map: map
        });

  marker.setLabel("C");
  marker.setPosition(place.geometry.location);

  // Zoom the map to the marker.
  map.panTo(place.geometry.location);
  map.setZoom(12);
}

如下圖所示,此時你就可以查看使用者與任一地點之間的關係。

展開即可觀看在應用程式中加入 Place Autocomplete 功能的逐步操作說明影片:

網站

Android 應用程式

iOS 應用程式

顯示交通時間和前往最近地點的距離

此範例使用:Distance Matrix API 同時支援:距離矩陣服務、Maps JavaScript API

取得使用者的位置之後,就能將該位置與你的地點進行比較。你可以利用距離矩陣服務和 Maps JavaScript API,協助使用者根據行車時間或道路距離來選取最方便的地點。

如果要顯示使用者附近的地點,必須先填入你的地點。使用你自己的位置資料庫時,請務必確認資料的格式可用於地圖中,例如 GeoJSON (詳情請參閱「資料層」主題)。

管理地點清單的標準做法是依距離排序。這個距離通常是以使用者和地點之間的直線距離來計算,但有時可能會誤導使用者。這條直線可能會穿過一條無法跨越的河流,或需經過交通繁忙的道路,因此另一個地點可能更加方便。如果你有好幾個地點都相距不過幾公里,就要特別注意這一點。

距離矩陣服務會根據清單中的起點和終點位置,傳回這些地點的移動距離和所需時間。對使用者來說,起點可能是其所在位置或希望使用的起點,而終點則是目的地位置。你可以使用座標組或地址來指定起點和終點;當你呼叫服務時,系統會自行比對地址。你可以使用距離矩陣搭配多種其他參數,根據目前或未來的行車時間來顯示結果。

以下範例呼叫了距離矩陣服務,並指定使用者的起點和位置。此範例顯示的是從地圖中心前往 Google 在倫敦三個辦公室的距離。

網址編碼快速參照:%2C = , (半形逗號)、%3A = : (半形冒號)、%7C = | (縱線字元)。

      https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
      &destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
      &units=metric
      &mode=driving
      &key=YOUR_API_KEY

你可以複製並執行下列版本:

      https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving

此服務的實際回應會是包含相符地址、距離和所需時間的清單,如下方範例所示:

展開即可查看回應範例:

{
    "destination_addresses": [
        "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
        "1-13 St Giles High St, West End, London WC2H 8AG, UK",
        "6 Pancras Square, Kings Cross, London N1C 4AG, UK"
    ],
    "origin_addresses": [
        "Unnamed Road, London, UK"
    ],
    "rows": [
        {
            "elements": [
                {
                    "distance": {
                        "text": "4.5 km",
                        "value": 4540
                    },
                    "duration": {
                        "text": "15 mins",
                        "value": 924
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "5.0 km",
                        "value": 5043
                    },
                    "duration": {
                        "text": "17 mins",
                        "value": 1044
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "6.9 km",
                        "value": 6919
                    },
                    "duration": {
                        "text": "23 mins",
                        "value": 1357
                    },
                    "status": "OK"
                }
            ]
        }
    ],
    "status": "OK"
}

下圖顯示了起點 (紅色標記 C) 和終點在地圖上的位置:

一張城市地圖的圖片,其中使用者位置以紅色標記表示,周圍地點以綠色標記表示。

直線距離和路線距離通常會有所差異,如下表所示。

地點 直線距離 路線距離 / 所需時間
地點 A 3.32 公里 4.5 公里 / 15 分鐘
地點 B 3.20 公里 5.0 公里 / 17 分鐘
地點 C 4.84 公里 6.9 公里 / 23 分鐘

雖然地點 B 的距離最近,但地點 A 可使用高速公路前往,因此路線距離和所需時間都較地點 B 來得短。

提出要求後,你就可以根據行車時間長短來排序回應。相關函式範例請見定位器程式碼研究室

此範例使用:Maps JavaScript API 路線規劃服務 同時支援:適用於 Android 和 iOS 的 Directions API 網路服務,可直接從應用程式或遠端透過伺服器 Proxy 使用

在網站或應用程式中顯示路線,使用者就不必離開你的網站,也就不會因其他網頁而分心或在地圖上看見競爭對手。你甚至可以顯示特定交通方式的碳排放足跡,並顯示任一路線所造成的環境影響。

路線規劃服務也提供相關功能,讓你能處理結果並輕鬆將其顯示在地圖上。

以下是顯示路線窗格的範例。如要進一步瞭解此範例,請參閱「顯示文字路線」一文。

如要進一步瞭解這些 Google 地圖功能,請參閱 Maps JavaScript API 說明文件或查看建構搜尋器的程式碼研究室逐步說明。

協助使用者進行預約

你可以提供如下圖所示的預約按鈕,讓使用者在地點側邊面板中查看 Place Details 時方便使用。

透過 Google 商家檔案提供這項功能是非常有效的方法,不過你也可以透過其他方式來提供。本節將進一步說明這些做法。

下圖顯示可用來導入預約和優惠功能的技術 (按一下可放大)。

使用 Google 商家檔案來啟用預約功能

使用 Google 商家檔案管理線上形象時,你建立的商家所在地點會與 Google 地圖平台地點 ID 建立關聯,以整合商家資料與地圖功能。

你可以利用 Google Business Profile API 來建立預約及其他可在應用程式中擷取和呈現的動作。

當使用者在地點側邊面板中查看 Place Details 時,你可以為其提供預約連結。本節將說明如何提供此連結。

  1. 為「APPOINTMENT」、「ONLINE_APPOINTMENT」或「DINING_RESERVATION」類型的地點建立 Google 商家檔案 placeActionLink。你需要使用 placeActionLink 物件,在側邊面板中插入預約連結 (如果你已建立好需要的預約動作連結,請跳到下個步驟)。以下是成功「placeActionLinks.create」POST 作業的回應範例:

    {
        "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
        "providerType": "MERCHANT",
        "isEditable": true,
        "uri": "https://example.com/reservation-uri",
        "placeActionType": "DINING_RESERVATION",
        "createTime": "2021-05-01T01:17:41.609161Z",
        "updateTime": "2021-05-01T01:17:41.609161Z"
    }
    
  2. 找出與 Google 地圖平台地點 ID 相關聯的 Google 商家檔案地點。

    當使用者查看 Place Details 時,看到的是 Google 地圖平台地點 ID 的詳細資料。由於地圖平台地點 ID 與 Google 我的商家地點 ID 相關聯,因此你需要根據地圖平台地點 ID 來找出 Google 商家檔案地點 ID,以擷取和顯示你建立的預約連結。請發出下列 Google Business Profile API 呼叫:

    1. 列出專案的帳戶
    2. 列出帳戶中的所有地點
    3. 帳戶地點的「LocationKey」中包含 Google 地圖平台地點 ID,可用來對照使用者查看的地點 ID。
  3. 有了地點 ID,你就能取得需要的動作連結。如要擷取現有的預約「placeActionLink」,請列出地點現有的「placeActionLinks,然後篩選「placeActionType」找出要使用的預約連結 (「APPOINTMENT」、「ONLINE_APPOINTMENT」或「DINING_RESERVATION」)。

    以下範例是清單呼叫回應中的「placeActionLink」預約。

     {
       "placeActionLinks": [
           {
               "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
               "providerType": "MERCHANT",
               "isEditable": true,
               "uri": "https://example.com/",
               "placeActionType": "APPOINTMENT",
               "createTime": "2021-05-01T01:17:41.609161Z",
               "updateTime": "2021-05-01T01:17:41.609161Z"
           }
       ]
     }
  4. 在側邊面板中建立「<div>」,並填入來自「placeActionLink」物件的相關資料,特別是預約/預訂連結的 URI。

新增預約連結的其他方法

如果你未使用 Google 商家檔案,請查看預約/預訂平台上的說明文件,瞭解如何將預約小工具嵌入網站或應用程式中。你也可以使用 Google Cloud,例如用於商品目錄管理的 Cloud Spanner (影片)。

顯示當地優惠

你可以在地點的 Place Details 側邊面板中顯示當地優惠,吸引使用者點選。 只要利用 Google 商家檔案 API,建立和擷取與地點相關聯的「貼文」(例如當地優惠)。下圖是在 Place Details 側邊面板中顯示當地優惠的範例。

(上一節的架構圖顯示可用來在定位器中新增優惠內容的技術。)

由於當地優惠與地點相關聯,因此你需要針對使用者查看的地點,找出與 Google 地圖平台地點 ID 相關聯的 Google 商家檔案地點 ID。 找到 Google 商家檔案地點 ID 後,就可擷取相關優惠,並以「localPost」的形式顯示於 Place Details 側邊面板中。步驟如下:

  1. 使用 Google Business Profile API 建立任何想顯示的優惠貼文,類型為「OFFER」。
  2. 在地圖上找出與地點 ID 相關聯的 Google 商家檔案地點/地點 ID。

    當使用者查看 Place Details 時,看到的是 Google 地圖平台地點 ID 的詳細資料。由於地圖平台地點 ID 與 Google 商家檔案地點 ID 相關聯,因此你需要根據地圖平台地點 ID 來找出 Google 商家檔案地點 ID,以擷取和顯示地點的當地優惠連結。請發出下列 Google Business Profile API 呼叫:

    1. 使用 Google Business Profile API 列出專案的帳戶
    2. 列出帳戶中的所有地點
    3. 帳戶地點的「LocationKey」中包含地圖地點 ID,可用來對照使用者查看的地點 ID。

    以下是 Google Business Profile API 中請求地點詳細資料的範例:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700

    回應中包含 locationKey 欄位,也就是可用於 Google 地圖平台請求中的地點 ID。

    展開即可查看回應範例。

          {
        "name": "accounts/111098884960588804666/locations/15899957830169237700",
        "locationName": "Sushi Sushi",
        "primaryPhone": "+49 2222 22222",
        "primaryCategory": {
            "displayName": "Restaurant",
            "categoryId": "gcid:restaurant",
        },
        "regularHours": {
            "periods": [
                {
                    "openDay": "MONDAY",
                    "openTime": "09:00",
                    "closeDay": "MONDAY",
                    "closeTime": "09:10"
                },
                {
                    "openDay": "TUESDAY",
                    "openTime": "11:30",
                    "closeDay": "TUESDAY",
                    "closeTime": "24:00"
                }
            ]
        },
        "locationKey": {
            "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
            "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c"
        },
        "latlng": {
            "latitude": 1.3670033,
            "longitude": 103.8556385
        },
        "openInfo": {
            "status": "OPEN",
            "canReopen": true
        },
        "locationState": {
            "isGoogleUpdated": true,
            "canUpdate": true,
            "canDelete": true,
            "isVerified": true,
            "isPublished": true,
            "canHaveFoodMenus": true
        },
        "attributes": [
            {
                "attributeId": "has_delivery",
                "valueType": "BOOL",
                "values": [
                    false
                ]
            },
            {
                "attributeId": "requires_masks_customers",
                "valueType": "BOOL",
                "values": [
                    true
                ]
            },
            {
                "attributeId": "url_order_ahead",
                "valueType": "URL",
                "urlValues": [
                    {
                        "url": "https://example.com/"
                    },
                ]
            },
            {
                "attributeId": "pay_credit_card_types_accepted",
                "valueType": "REPEATED_ENUM",
                "repeatedEnumValue": {
                    "setValues": [
                        "visa"
                    ],
                    "unsetValues": [
                        "american_express"
                    ]
                }
            }
        ],
        "address": {
            "regionCode": "SG",
            "languageCode": "en-US",
            "postalCode": "560445",
            "addressLines": [
                "445 Ang Mo Kio Ave 10"
            ]
        },
        "profile": {
            "description": "Example restaurant"
        }
    }
          
  3. 現在有了地點 ID,你就能取得需要的優惠內容。如要擷取現有的優惠貼文,請列出地點現有的「localPosts」,然後篩選「OFFER」的「topicType」,找出要使用的優惠內容。

    以下是請求列出特定地點的有效當地貼文的範例:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    以下是回應中「OFFER localPost」的範例。

    展開即可查看回應範例。

    {
        "localPosts": [
            {
                "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
                "languageCode": "en",
                "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
                "state": "LIVE",
                "event": {
                    "title": "Bento BOGO",
                    "schedule": {
                        "startDate": {
                            "year": 2020,
                            "month": 1,
                            "day": 20
                        },
                        "startTime": {},
                        "endDate": {
                            "year": 2021,
                            "month": 1,
                            "day": 21
                        },
                        "endTime": {}
                    }
                },
                "updateTime": "2020-09-11T10:56:22.594Z",
                "createTime": "2020-09-11T10:56:22.594Z",
                "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
                "media": [
                    {
                        "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                        "mediaFormat": "PHOTO",
                        "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                    }
                ],
                "topicType": "OFFER",
                "offer": {
                    "couponCode": "BOGO-JET-CODE",
                    "redeemOnlineUrl": "https://www.example.com/redeem",
                    "termsConditions": "Offer only valid for order-ahead orders placed online."
                }
            },
        ],
    }
            
  4. 在側邊面板中建立「<div>」,並填入來自「localPost」物件的相關資料。

自訂地圖

你可以透過幾種方式變更地圖的外觀和詳細資料。舉例來說,可以執行下列操作:

  • 建立自訂標記來取代預設的地圖圖釘。
  • 根據品牌風格來變更地圖項目的顏色。
  • 控制顯示的搜尋點 (景點、餐飲、住宿地點等) 及密度,讓使用者將注意力集中在你的地點上,同時醒目顯示地標,協助使用者前往最近的地點。

建立自訂地圖標記

你可以自訂標記,例如變更預設顏色 (用於顯示地點是否營業中) 或以自訂圖片取代標記 (例如品牌標誌)。資訊視窗或彈出式視窗則可為使用者提供其他資訊,例如:營業時間、電話號碼或相片。你也可以建立光柵、向量、可拖曳或甚至是動畫自訂標記。

以下為使用自訂標記的地圖範例 (如需原始碼,請參閱 Maps JavaScript API 自訂標記主題)。

如需詳細資訊,請參閱 JavaScript (網頁)AndroidiOS 適用的標記說明文件。

設定地圖樣式

Google 地圖平台能讓你設定地圖樣式,藉此協助使用者找到最近的地點、以最快的路線前往該地點,同時幫助你強化自家品牌。舉例來說,你可以將地圖改為與品牌風格一致的顏色,或控制使用者能在地圖上看見的搜尋點,減少分心的機率。Google 地圖平台也提供了地圖新手適用的多種範本,其中有些已針對不同產業進行最佳化,例如旅遊業、物流業、房地產業或零售業。

你可以前往 Google Cloud Console,在專案的「地圖樣式」頁面中建立或修改地圖樣式。

展開即可查看在 Cloud Console 中建立和設定地圖樣式的動畫:

產業地圖樣式

下方動畫展示了你可使用哪些預先定義的產業專用地圖樣式。建議各產業從這些樣式著手,奠定良好基礎。舉例來說,零售業地圖樣式減少了地圖上搜尋點的數量,讓使用者能專注在你的地點,同時透過地標協助使用者以最快的速度前往最近的地點,且降低走錯路的機會。

在「地圖樣式」頁面中,用滑鼠按一下 [建立新的地圖樣式]。在「新增地圖樣式」頁面中,用滑鼠按一下各產業最佳化樣式旁的圓形按鈕:旅遊業、物流業、房地產業和零售業。當你點選不同按鈕時,地圖樣式說明和圖像預覽也會隨之改變。

搜尋點控制項

下方動畫說明如何設定搜尋點的標記顏色和提高地圖樣式中的搜尋點密度。密度越高,地圖上顯示的搜尋點標記就越多。

在「地圖樣式」頁面中,用滑鼠按一下 [建立新的地圖樣式]。在「新增地圖樣式」頁面中,選取「打造自己的樣式」下方的「Google 地圖」圓形按鈕。用滑鼠按一下「地圖集」圓形按鈕以選取地圖集樣式,然後按一下 [在樣式編輯器中開啟]。在樣式編輯器中,用滑鼠依序按一下 [搜尋點] 地圖項目和 [圖示] 元素,然後將顏色設為紅色。接著用滑鼠選取「搜尋點密度」核取方塊,並將密度控制項向右滑動至最高密度。隨著密度變高,地圖預覽上就會出現越來越多紅色標記。接著將滑鼠移至 [儲存] 按鈕。

每種地圖樣式都有專屬 ID。在 Cloud Console 中發布樣式後,你就能在程式碼中參照該地圖 ID,也就是說不需要重構應用程式,就可以即時更新地圖樣式。新的樣式會自動顯示在現有的應用程式中,而且可以在各平台中使用。以下範例說明如何使用 Maps JavaScript API,在網頁中加入地圖 ID。

在指令碼網址中加入一或多個 map_ids 後,當你在程式碼中呼叫這些樣式時,Maps JavaScript API 就會自動採用這些樣式,讓你更迅速地算繪地圖。

<script
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap">
</script>

下方程式碼會在網頁上顯示樣式化地圖 (此範例未顯示用於指定地圖在網頁上位置的 HTML <div id="map"></div> 元素)。

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 51.485925, lng: -0.129500},
  zoom: 12,
  mapId: '1234abcd5678efgh'
});

進一步瞭解如何在 JavaScript (網頁)AndroidiOS 中導入雲端式地圖樣式設定功能。

使用數據分析功能取得使用深入分析資料

你可以使用數據分析功能,深入瞭解使用者與定位器的互動情形。本節提供設定和監控 Google Analytics (分析) 及 Google 商家檔案數據分析的指引,讓你追蹤最感興趣的資料。

由於 Google Analytics (分析) 本身就具備強大的功能且可靈活運用,因此我們並不會提供全部的完整設定和使用資訊,不過我們會分享可以參閱哪些重要說明文件中的操作說明,並列出對定位器應用程式而言最重要的數據分析考量點。

設定 Google Analytics (分析)

如果你已使用 Google Analytics (分析) 來分析應用程式,可略過這一節。

以下範例列出為啟用 Google Analytics (分析),而必須貼到網站上的「全域代碼」。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

無論你是使用 Google 代碼管理工具,還是將 Google Analytics (分析) 直接加進網站中,都必須瞭解如何利用 Google Analytics (分析) 導入做法來達到下列目的:

  • 吸引使用者採取可與網站網頁瀏覽分別評估的互動動作,例如點擊 (事件)。
  • 查看按有意義的群組 (維度自訂維度) 分類的原始資料 (指標)。

使用自訂事件

以下是在定位器中定義自訂事件的範例:

gtag('event', 'location', {
  'method': 'address'
});

請務必為「event」和「method」設定夠明確的名稱,以便瞭解報表中的事件。針對想評估的特定互動觸發這些事件,例如使用者從「自動完成」下拉式清單中選取地址時,如下圖所示。

你可以將使用自己定義的事件和方法的追蹤呼叫,傳送給 Google Analytics (分析)。每個查詢參數將分別列於不同行,以便瀏覽。

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

下圖顯示 Google Analytics (分析) 呼叫出現在瀏覽器「網路」分頁「檢查」檢視中的樣子 (按一下可放大)。

你可以查看 Google Analytics (分析) 中的「即時」檢視,確認是否已正確擷取自訂事件代碼。例如,先前為 Place Autocomplete 設定的「地點」事件會出現在 Google Analytics (分析) 中,如下圖所示。

 

你也可以使用 DebugView 監控即時事件,如下圖所示。請注意,務必先等候 24 小時,再前往 Google Analytics (分析) 的「互動 > 事件」部分存取完整的事件報告。

此外,你可以研擬和評估策略,透過定位器應用程式為實體據點吸引更多來店人潮。舉例來說,Google Analytics (分析) 提供親臨門市 功能,可將親臨實體商店數據分析 (由 Google Ads 評估) 連結到定位器數據分析。你也可以規劃自己的「應用程式到店面」策略,例如推出可在實體據點兌換的線上優惠。

Google 商家檔案指標

除了使用 Google Analytics (分析) 追蹤感興趣的事件、指標和維度以外,你也可以利用 Google 我的商家提供的專屬指標。 舉例來說,如果你在定位器中新增預約/預訂連結和當地優惠連結,即可取得這些連結的檢視次數和點擊次數指標。

下列 Google Business Profile API 範例即請求提供多個類型指標。如要追蹤優惠點擊,最適合使用的指標為「LOCAL_POST_VIEWS_SEARCH」和「LOCAL_POST_ACTIONS_CALL_TO_ACTION」。

展開即可查看請求範例。

POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
 "locationNames": [
   "accounts/111098884960528804666/locations/15899957830169237700"
 ],
 "basicRequest": {
         "metricRequests": [
            {
              "metric": "QUERIES_DIRECT"
            },
            {
              "metric": "QUERIES_INDIRECT"
            },
            {
              "metric": "VIEWS_MAPS"
            },
            {
              "metric": "VIEWS_SEARCH"
            },
            {
                "metric": "ACTIONS_DRIVING_DIRECTIONS"
            },
            {
                "metric": "LOCAL_POST_VIEWS_SEARCH"
            },
            {
                "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
            }
         ],
         "timeRange": {
              "startTime": "2021-01-01T01:01:23.045123456Z",
              "endTime": "2021-04-30T23:59:59.045123456Z"
         }
   }
}

展開即可查看回應範例。

{
   "locationMetrics": [
       {
           "locationName": "accounts/111098884960528804666/locations/15899957830169237700",
           "timeZone": "Asia/Singapore",
           "metricValues": [
               {
                   "metric": "QUERIES_DIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "82"
                   }
               },
               {
                   "metric": "QUERIES_INDIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1493"
                   }
               },
               {
                   "metric": "VIEWS_MAPS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1571"
                   }
               },
               {
                   "metric": "VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "631"
                   }
               },
               {
                   "metric": "ACTIONS_DRIVING_DIRECTIONS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "3"
                   }
               },
               {
                   "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "42"
                   }
               },
               {
                   "metric": "LOCAL_POST_VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "11"
                   }
               }
           ]
       }
   ]
}

回應包含指標,其中最重要的包括:

  • 在 Google 地圖上獲得 1571 次地點瀏覽
  • 在 Google 搜尋上獲得 631 次地點瀏覽。
  • 獲得 3 次針對該地點規劃行車路線的請求。
  • 獲得 42 次 LOCAL_POST_ACTIONS_CALL_TO_ACTION 優惠點擊。
  • 獲得 11 次當地 Google 搜尋貼文瀏覽。

其他指標選項需要使用「透過 Google 預訂」來建立動作連結。使用者點選在「透過 Google 預訂」中建立的動作連結時,你可以在 Google Analytics (分析) 中記錄這些動作來追蹤轉換。 詳情請參閱轉換追蹤說明文件

無論使用哪一種指標策略,評估都不只是為了瞭解自己是否達到 KPI。評估數據也能有助於瞭解這些定位器改善項目對業務的影響。此外,你也可以比較定位器上的 Google Analytics (分析) 指標與 Google 商家檔案指標。舉例來說,透過比較這些指標,你可以瞭解有多少客戶從定位器和 Google 地圖取得路線指引,並順利抵達實體據點。


改善 Locator Plus

你可以視業務需求或使用者需求,進一步改善使用者體驗。

傳送路線至行動裝置

為方便使用者前往某個地點,你可透過簡訊或電子郵件將路線連結傳送給使用者。使用者點擊連結時,若已安裝 Google 地圖應用程式,手機便會自動啟動應用程式,否則就會在裝置的網路瀏覽器中載入 maps.google.com。這兩種體驗都能讓使用者選擇使用即時路線導航 (包括語音導引) 以前往目的地。

你可以使用地圖網址來建立如下所示的路線網址,其中網址編碼處理的地點名稱是 destination 參數、地點 ID 則是 destination_place_id 參數。建立或使用地圖網址不需付費,因此不需要在網址中加入 API 金鑰。

      https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

你也可以提供 origin 查詢參數,使用相同的地址格式做為目的地。但若省略此值,路線會從使用者目前的位置開始,這可能與使用 Locator Plus 應用程式時的位置不同。地圖網址會提供其他查詢參數選項,例如 travelmodedir_action=navigate,以便在開啟導航的情況下啟動路線。

這個可點擊的連結是從上述範例網址延伸而來,會將 origin 設為倫敦足球場,並使用 travelmode=transit 來提供前往目的地的大眾運輸路線。

若要傳送包含此網址的簡訊或電子郵件,目前建議你使用第三方應用程式,例如 twilio。如果你是使用 App Engine,則可以透過第三方公司來傳送簡訊或電子郵件。詳情請參閱「利用第三方服務傳送訊息」一文。

顯示街景服務,協助使用者透過影像瞭解各地點

針對世界上眾多地點,你都可以使用街景服務來呈現某個地點的外觀,讓使用者在抵達前先透過影像瞭解該地點。你可以依照是否想讓使用者能 360 度「查看」該區域,選擇以互動 (網頁) 或靜態 (API) 形式提供街景服務。街景服務同時支援 AndroidiOS

利用 Geolocation 判定使用者的位置

在大多數情況下,你可以利用使用者裝置或瀏覽器內建的定位服務,來判定使用者的位置。我們提供的範例說明了如何使用瀏覽器的 HTML5 Geolocation 功能,在 Google 地圖上顯示使用者或裝置的地理位置,同時準備了在 AndroidiOS 中要求權限和取得位置的說明文件。然而,有時你可能會想使用替代的位置定位器,比方說當裝置已停用定位服務,或擔心裝置位置遭到假冒時。

Geolocation API 這個伺服器端 API 會根據用戶端可偵測到的行動通信基地台和 Wi-Fi 節點相關資訊,傳回地點和精確度半徑。你可將 Geolocation 做為判定使用者位置的備份機制,或使用 Geolocation 來交叉檢查裝置回報的位置。

結合自訂位置資料與 Place Details

先前在「提供 Place Details」一節中,我們提過可利用 Place Details 為使用者提供豐富的地點相關資料,例如營業時間、相片和評論。

建議你先瞭解 Place Details 中不同資料欄位的費用,分為基本資料、聯絡資料和氣氛資料等類型。為控管費用,你可將現有的地點資訊結合 Google 地圖上的最新資訊 (通常是基本和聯絡資料),例如:暫停營業狀態、假日營業時間和使用者評分、相片和評論。 如果你已經有地點的聯絡資訊,就不需要在 Place Details 中請求這些欄位,而可根據你想顯示的內容,將請求限制於只擷取基本或氣氛資料欄位。

除了 Place Details,你也可以使用自己的地點資料或做為補充。全端定位器的程式碼研究室所提供的範例,說明了如何使用 GeoJSON 搭配資料庫來儲存和擷取自己擁有的地點詳細資料。