Руководство по реализации улучшенного инструмента поиска адресов

Обзор

При поиске товаров и услуг в интернете пользователи хотят не просто посетить компанию, назначить встречу или забрать заказ. Им нужно найти самое удобное место неподалеку и попасть туда как можно быстрее. Продавцам при этом важно обеспечить удобство для пользователей, чтобы клиенты чаще посещали вас, были довольны и реже звонили в службу поддержки. Вы также можете проанализировать, как работает инструмент поиска, находят ли потенциальные клиенты ваш адрес и как можно улучшить реализацию функции.

Locator Plus — инструкции и рекомендации, которые мы приводим в этом документе, — это оптимальное сочетание API платформы Google Карт для создания удобных для пользователей инструментов поиска адресов. Следуя нашим рекомендациям, вы поможете пользователям находить ваши офисы или магазины на карте, просматривать подробные сведения и прокладывать маршруты для автомобилей, велосипедов, пешеходов и общественного транспорта.

В улучшенном инструменте поиска адресов есть панель аналитики, с помощью которой можно изучать данные и делать выводы. Вы сможете узнать, насколько функция поиска адресов привлекательна для пользователей. Этот отчет можно найти в разделе Отчеты о привлечении аудитории. Подробнее…

На приведенной ниже схеме показаны основные API, необходимые для реализации инструмента поиска адресов, На диаграмме также показана база данных с вашими собственными данными о местоположении, которую вы можете объединить с информацией о местах, чтобы пользователи получали максимально полный набор информации. Чтобы увеличить изображение, нажмите на него.

Включение API

• Maps JavaScript API
• Places API (новая версия)
• Geocoding API
• Routes API

Рекомендации

Ниже перечислены рекомендации, рассматриваемые в этой статье.

• check_circle_filled Флажком отмечены самые важные.
• stars Звездочкой отмечены полезные, но необязательные функции.

Инструмент поиска адресов очень удобен для пользователей. Тем не менее на некоторых ресурсах нет даже простой карты, и людям приходится покидать сайт или приложение, чтобы найти ближайший офис или магазин. И пользователям это не нравится. Поэтому мы рекомендуем добавить на сайт или в приложение карту и настроить ее так, чтобы люди могли легко находить ваши адреса и получать всю необходимую информацию о них.

Эту функцию можно включить двумя способами: автоматически, с помощью решения Quick Builder Locator Plus, или самостоятельно реализовать Динамические карты. В этом разделе подробно описаны оба способа.

Инструмент Quick Builder для улучшенного поиска адресов

С помощью инструмента Quick Builder для улучшенного поиска адресов можно импортировать данные из профиля компании. При поиске адресов на сайте теперь будут показываться любые изменения в профиле. Например, обновленные часы работы, контактные данные, фотографии, список услуг и т. п. Инструмент Quick Builder позволяет быстро задать настройки адресов на карте, создать код для реализации или непосредственно добавить функцию в Google Cloud Storage за считаные минуты.

Самостоятельная реализация динамических карт

Разместите на своем сайте динамические карты – их можно передвигать и масштабировать, на них можно просматривать сведения о местах и объектах инфраструктуры. Для этого нужно просто добавить несколько строк кода.

Сначала нужно настроить использование Maps JavaScript API на вашей странице. Для этого добавьте в ее HTML-код следующий скрипт, в том числе libraries=marker, чтобы вы могли добавлять на карту расширенные маркеры.

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

URL ссылается на функцию JavaScript initMap, которая выполняется при загрузке страницы. В этом URL можно также указать для карты язык или регион, чтобы она правильно отображалась при показе пользователям из целевой страны. Кроме того, если вы выберете регион, это обеспечит правильную работу приложений при их использовании за пределами США. Полный список поддерживаемых языков и регионов приведен в статье Доступность сервисов платформы Google Карт. Ознакомьтесь также с подробной информацией об использовании параметра region.

Затем необходимо разместить карту на странице с помощью HTML-тега div. Он позволяет указать, где именно будет отображаться карта.

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

После этого необходимо настроить основные функции карты. Для этого используется функция initMap в URL скрипта. Как показано в примере ниже, вы можете задать начальное местоположение, идентификатор карты (необходим для расширенных маркеров и облачных стилей), тип карты и элементы управления, которые будут доступны пользователю. Обратите внимание, что для getElementById() указано значение "map" идентификатора div из предыдущего примера.

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

Обычно для поиска адресов задаются начальное местоположение, центральная точка или границы, а также уровень масштабирования (увеличения карты). Большую часть остальных настроек, таких как изменение элементов управления, использовать необязательно. Они предназначены для расширения возможностей взаимодействия с картой.

Получение идентификаторов мест

Вероятно, у вас есть база данных с основными сведениями о ваших офисах или магазинах: названиями, адресами, номерами телефонов и т. п. Платформа Google Карт также содержит определенную информацию о местах, в том числе их географические координаты и добавленные пользователями сведения. Чтобы получить эту информацию, вам необходимо найти идентификатор места, присвоенный вашему офису или магазину. Вы можете отправить запрос к конечной точке Text Search (New) в Places API (New), указав только поле places.id в маске поля (что активирует код Text Search Essentials IDs Only). Ниже приведен пример такого запроса для офиса Google в Лондоне.

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

Вы можете сохранить этот идентификатор в своей базе данных и использовать его для получения информации о месте. Ниже рассказывается, как с помощью идентификатора места выполнять геокодирование, получать информацию о месте и запрашивать маршруты.

Геокодирование адресов

Если в вашей базе данных есть почтовый адрес офиса или магазина, но нет его географических координат, используйте Geocoding API, чтобы получить широту и долготу, с помощью которых можно будет добавить маркер на карту. Геокодирование выполняется на стороне сервера. Сохраните полученные широту и долготу в своей базе данных и обновляйте их по крайней мере один раз в 30 дней.

Ниже приведен пример использования Geocoding API для получения широты и долготы по идентификатору места для офиса Google в Лондоне.

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

Добавление адресов на карту

Следующий этап – добавление ваших адресов на карту. Обычно это делается с помощью расширенных маркеров, но есть и другие способы, например с использованием слоя данных.

Вот как добавить на карту расширенный маркер с собственным текстовым глифом, если известны широта и долгота адреса:

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

Если вам нужно показать на карте сразу несколько адресов, добавьте несколько маркеров.

Если у вас много адресов, воспользуйтесь утилитой для кластеризации маркеров (JavaScript, Android, iOS). Посмотрите пример для JavaScript на GitHub.

Вы можете предоставлять пользователям полезную информацию о своих офисах или магазинах. Контактные данные, часы работы, оценки, добавленные другими пользователями фотографии, наличие статуса "Временно закрыто" и другие сведения помогут вашим клиентам. После вызова Places API (New) можно отфильтровать ответ и показать результат в информационном окне, на боковой панели или другим способом.

Чтобы запросить информацию о своих адресах, вы должны указать их идентификаторы. Подробнее о том, как получить идентификаторы адресов…

В приведенном ниже примере для получения информации о местах и добавления их в информационное окно используются класс Place и библиотека мест из Maps JavaScript API. Эта реализация позволяет сократить расходы, поскольку запрос для получения сведений о месте выполняется, только если пользователь проявляет интерес, нажимая на маркер.

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
    gmpClickable: true,
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("gmp-click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });
  
  

Дайте пользователям возможность посмотреть на ваш офис или магазин сверху. Так они поймут, как он выглядит, и им будет проще его найти. Когда пользователь выбирает определенный адрес, чтобы рассмотреть его, вы можете показать спутниковый снимок места, сделанный под углом 45°.

Ниже приведен пример кода, который задает большой масштаб и совместимый тип карты, а также угол наклона, чтобы по возможности показывалось изображение под углом 45°. Подробнее о доступности изображений под углом 45°…

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

Сброс настроек карты до исходных

Пользователи часто предпочитают переключаться между детализированным снимком определенного адреса и общим списком нескольких адресов поблизости. Чтобы обеспечить такую возможность, добавьте прослушиватель, который будет определять, когда пользователь переходит от подробного просмотра к взаимодействиям с картой или к списку. Например, при прослушивании события zoom_changed для объекта map становится известно, когда пользователь вручную уменьшает масштаб карты или вызывает другую функцию, которая меняет масштаб. В этом примере при уменьшении масштаба возвращается исходный тип и угол наклона карты.

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

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

Следующий важный компонент инструмента поиска адресов – определение местоположения пользователя. По умолчанию вы можете опираться на геолокацию мобильного телефона или веб-браузера, запрашивая разрешение установить в качестве пункта отправления текущее местоположение пользователя. Однако клиент может отклонить запрос или указать в качестве пункта отправления другое местоположение.

Люди привыкли к функции автозаполнения в Google Картах. С помощью библиотек Places платформы Google Карт эту функцию можно интегрировать в любое мобильное или веб-приложение. Когда пользователь начнет вводить адрес, недостающий текст автоматически подставится через виджет. Вы также можете настроить собственную функцию автозаполнения мест, обращаясь к Place Autocomplete Data API напрямую.

Чтобы включить на своем сайте использование библиотеки Place Autocomplete, вам нужно добавить всего несколько параметров запроса в URL скрипта Maps JavaScript API. В приведенном ниже примере добавляется фрагмент libraries=places,marker.

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

Затем добавьте на страницу элемент контейнера, в который будет добавлен виджет PlaceAutocompleteElement.

<div id="autocomplete-container"></div>

Наконец, инициализируйте виджет PlaceAutocompleteElement и добавьте его в контейнер. Если вы установите ограничение для подсказок автозаполнения мест, указав для параметра includedPrimaryTypes: ["geocode"] значение "geocode", то в виджете будут поддерживаться почтовые адреса, районы, города и почтовые индексы. Таким образом, пользователь сможет указать исходное местоположение с нужной степенью точности. Когда пользователь выбирает вариант, запускается событие gmp-select, и вы можете вызвать функцию place.fetchFields(), чтобы запросить поле location, содержащее широту и долготу исходного местоположения пользователя. Вы сможете отцентрировать карту по этим координатам и соотнести их с координатами ваших адресов.

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });
}

В приведенном ниже примере после того, как пользователь выбрал адрес, выполняется функция addUserLocation(). Она находит местоположение на карте, перемещает карту в соответствующую область и добавляет расширенный маркер.

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

После этого можно увидеть, где находится пользователь по отношению к вашим адресам, как показано ниже.

Определив местоположение пользователя, вы можете сопоставить его со своими адресами. Используя функцию Compute Route Matrix в Routes API (или класс RouteMatrix в библиотеке Routes, Maps JavaScript API), вы поможете пользователям выбрать наиболее удобное местоположение с учетом времени в пути или расстояния.

Показ находящихся поблизости офисов или магазинов предполагает, что информация о них уже получена. Если вы передаете ее из собственной базы данных, то убедитесь, что выбран поддерживаемый формат, например GeoJSON. Подробную информацию можно найти в статье Слой данных.

Стандартный способ упорядочивания списка адресов – по расстоянию. Обычно оно определяется как длина отрезка, соединяющего местоположения пользователя и вашего офиса или магазина, но при этом не учитываются препятствия, такие как участок реки без моста или пробка. В таком случае добраться до более отдаленного офиса или магазина может быть удобнее. Этот нюанс важен, если у вас есть адреса на расстоянии нескольких километров друг от друга.

Метод computeRouteMatrix анализирует список местоположений (начального и конечных) и возвращает не только расстояния между ними, но и время в пути. Начальная точка соответствует местоположению пользователя или выбранному им пункту отправления, а конечные точки соответствуют вашим адресам. Начальные и конечные точки можно указывать как пары координат, идентификаторы мест или адреса. Вы можете использовать computeRouteMatrix с параметрами маршрутизации, например TRAFFIC_AWARE, чтобы показывать результаты с учетом текущего или будущего времени в пути.

В приведенном ниже примере выполняется вызов конечной точки computeRouteMatrix в Routes API с указанием исходного местоположения пользователя и идентификаторов мест назначения. В этом примере рассчитывается расстояние и время в пути от центра карты до трех офисов Google в Лондоне:

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

Ответ от сервиса будет содержать расстояние (в метрах) и время в пути для каждой пары пунктов отправления и назначения, как показано в примере ниже.

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

Ниже показана карта с отмеченными на ней пунктом отправления (красный маркер C) и пунктами назначения.

Расстояние по прямой и длина маршрута часто не совпадают, как показано в таблице ниже.

Несмотря на то что адрес B расположен ближе всего, длина маршрута и время в пути до адреса A меньше, поскольку до него можно добраться по шоссе.

Выполнив запрос к сервису Distance Matrix, вы можете упорядочить полученные ответы по времени в пути. Примеры реализации такой функции приведены в практической работе.

Показывайте маршруты к офисам или магазинам прямо на своем сайте или в приложении. Тогда пользователям не нужно будет переходить на другой ресурс, и они не увидят на карте адреса ваших конкурентов. С помощью Routes API также можно запрашивать экологичные маршруты, чтобы оценивать расход топлива или энергии и показывать влияние поездки на окружающую среду.

Класс Route в библиотеке Routes (Maps JavaScript API) также содержит методы, например createPolylines() и createWaypointAdvancedMarkers(), которые позволяют обрабатывать результаты и показывать их на карте.

Ниже приведен пример запроса и отображения маршрута на карте. Подробную информацию можно найти в статье Получение маршрута.

Чтобы узнать больше об этих функциях Карт, ознакомьтесь с документацией по Maps JavaScript API. Также рекомендуем посмотреть пошаговые практические работы, которые помогут вам реализовать инструмент поиска адресов.

Чтобы повысить удобство для пользователей, вы можете добавить на боковую панель с информацией о месте кнопку для записи на прием/бронирования, как показано на рисунке ниже.

Это можно сделать двумя способами: автоматически, с помощью инструмента Quick Builder для улучшенного поиска адресов, или через профиль компании. В этом разделе подробно описаны оба способа.

Как использовать Quick Builder Locator Plus

С помощью решения Quick Builder Locator Plus можно импортировать данные из профиля компании. После этого вы сможете добавлять ссылки для бронирования с помощью сервиса Забронировать через Google (если они доступны). Инструмент Quick Builder для улучшенного поиска адресов можно использовать, даже если у вас нет профиля компании, связанного с аккаунтом Google. Вы можете добавить ссылки для компаний, которые уже связаны со сторонними поставщиками услуг бронирования в сервисе "Забронировать через Google"*.

Функция "Забронировать через Google" доступна только в определенных странах и регионах, где компании сотрудничают с поддерживаемым сервисом бронирования . Если вы хотите использовать сервис "Забронировать через Google", но не сотрудничаете с нашими партнерами, попросите своего поставщика заполнить эту форму и ознакомиться с документацией по началу работы. Если у вас пока нет сервиса бронирования, вы можете посмотреть список подходящих сервисов в разделе "Бронирование" в Менеджере профиля компании.

Как включить запись на прием через профиль компании

Если вы управляете своим присутствием в интернете с помощью профиля компании, адреса компаний, которые вы создаете, связываются с идентификаторами мест на платформе Google Карт, чтобы можно было интегрировать сопоставление и коммерческие данные.

С помощью Business Profile API вы можете создавать действия (например, запись на прием), которые затем извлекаются и показываются в приложениях. Реализовать эту функцию можно вручную, следуя инструкциям ниже.

Вы можете добавить на боковую панель с информацией о компании ссылку, перейдя по которой, пользователи смогут записаться на прием или создать бронирование. Ниже приводятся инструкции о том, как это сделать.

1. Используя Business Profile API, создайте объект placeActionLink для адреса с типом APPOINTMENT, ONLINE_APPOINTMENT или DINING_RESERVATION. Здесь placeActionLink – это объект на боковой панели, который будет использоваться для записи/бронирования. Если у вас уже есть ссылка для записи, перейдите к следующему шагу. Ниже приводится пример успешной операции POST для метода placeActionLinks.create.

   {
       "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 Карт.

   Когда пользователи просматривают информацию об адресе, она выводится именно для идентификатора места на платформе Google Карт. Чтобы получить и показывать созданную ссылку для записи/бронирования, вам нужно найти идентификатор адреса, связанный с идентификатором места на платформе Карт. Выполните следующие вызовы Business Profile API:

   1. Получите список всех аккаунтов, связанных с проектом.
   2. Получите список всех адресов в аккаунте.
   3. В адресах аккаунта ключ LocationKey содержит идентификатор места на платформе Google Карт, который можно сравнить с идентификатором просматриваемого адреса.

3. А зная этот идентификатор, вы можете получить нужную ссылку. Чтобы получить существующую ссылку 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 ссылки записи/бронирования.

Альтернативы ссылкам для записи на прием

Если вы не являетесь менеджером профиля компании или не хотите использовать инструмент Quick Builder для улучшенного поиска адресов, найдите в документации своей платформы бронирования инструкции о том, как встроить соответствующий виджет на сайт или в приложение. Вы также можете использовать сервис Google Cloud, например Cloud Spanner для управления инвентарем (видео).

На боковой панели с информацией о месте можно показывать местные предложения. Google My Business API позволяет создавать и извлекать публикации (например, местные предложения), связанные с вашими адресами. На скриншоте ниже показано, как это выглядит.

На схеме в разделе Конструктор показано, какие технологии позволяют добавлять предложения в поиск адресов.

Поскольку местные предложения связаны с адресами, вам нужно будет определить идентификатор адреса, связанный с идентификатором места на платформе Google Карт. С помощью этого идентификатора вы сможете извлечь нужное предложение как localPost и показать его на панели с информацией о месте, которую просматривает пользователь. Вот как это сделать:

1. С помощью Google My Business API создайте публикации с предложениями (тип OFFER).

2. Найдите адрес или идентификатор адреса, связанный с идентификатором места на карте.

   Когда пользователи просматривают информацию о месте, она выводится именно для идентификатора места на платформе Google Карт. Чтобы получить и показывать созданную ссылку на предложение, вам нужно найти идентификатор адреса, связанный с идентификатором места на платформе Карт. Выполните следующие вызовы Business Profile API:

   1. Получите список всех аккаунтов, связанных с проектом.
   2. Получите список всех адресов в аккаунте.
   3. В адресах аккаунта ключ LocationKey содержит идентификатор места на платформе Google Карт, который можно сравнить с идентификатором просматриваемого адреса.

   Ниже приводится пример запроса информации об адресе в Business Profile API.

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

   Ответ содержит поле locationKey – это идентификатор места, который можно использовать в запросах для платформы Google Карт.

   Пример ответа

         {
       "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. Зная идентификатор адреса, вы можете получить нужное предложение. Чтобы извлечь существующую публикацию с предложением, вызовите список публикаций 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.

Вы можете менять внешний вид и параметры карты, в том числе:

• использовать собственные маркеры вместо стандартных;
• менять цвета в соответствии с цветами своего бренда;
• скрывать и показывать объекты инфраструктуры (достопримечательности, рестораны, гостиницы и т. п.), а также выбирать их плотность, чтобы ваши адреса были самыми заметными на карте, а другие объекты лишь помогали сориентироваться.

Создание собственных маркеров

Вы можете настроить расширенные маркеры, изменив цвет фона, контура или глифа стандартного маркера (например, чтобы показать, открыто ли сейчас местоположение), заменив маркер на собственное графическое изображение, например логотип бренда, или создав собственные маркеры HTML и CSS. Также можно показывать дополнительную информацию, такую как часы работы, номер телефона и даже фотографии, в информационном окне.

Ниже показан пример использования собственных графических маркеров на карте. Код можно посмотреть в статье о собственных графических маркерах в документации по Maps JavaScript API.

Подробная информация приведена в документации по расширенным маркерам для JavaScript (сайтов), Android и iOS.

Определение стилей карты

Платформа Google Карт позволяет изменить стиль карты так, чтобы пользователям было легче найти ближайший офис или магазин и добраться до него. Это поможет вам привлекать клиентов. Например, измените цвета карты в соответствии с цветами вашего бренда и укажите, какие объекты инфраструктуры будут видны пользователю, а какие – нет. Платформа Google Карт предоставляет базовые шаблоны. Некоторые из них оптимизированы для определенных видов деятельности, таких как туризм, логистика, недвижимость и розничная торговля.

Создать или изменить стиль карты можно на странице Стили карты проекта в консоли Google Cloud.

Видеоинструкции по созданию и применению стилей карты в Cloud Console

Стили карт для отдельных видов деятельности

В этом анимационном ролике показаны готовые стили карт для отдельных видов деятельности. Вы можете использовать эти стили в качестве основы. Например, на карте для розничной торговли уменьшено количество объектов инфраструктуры – пользователи будут видеть только ваши адреса и ориентиры, которые помогут быстро добраться.

Управление объектами инфраструктуры

В этом анимационном ролике показано, как задать цвет маркера для объекта инфраструктуры и увеличить плотность таких объектов на карте. Чем выше плотность, тем больше маркеров POI на карте.

Каждому стилю карты назначается уникальный идентификатор. После публикации стиля в Cloud Console его идентификатор необходимо добавить в код сайта или приложения. Это позволит вам редактировать стиль без необходимости выполнять рефакторинг. Изменения будут применяться автоматически. Ниже показано, как добавить идентификатор карты на веб-страницу с помощью Maps JavaScript API.

Если URL скрипта содержит один или несколько параметров map_ids, то Maps JavaScript API автоматически открывает доступ к указанным стилям. Это позволяет быстрее отрисовывать карту при вызове этих стилей в коде.

<script
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</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 (сайтов), Android и iOS.

Анализ статистики поможет вам понять, как пользователи взаимодействуют с поиском адресов. В этом разделе рассказывается, как настроить сбор данных в Google Аналитике и профиле компании, чтобы отслеживать наиболее важные для вас сведения. В инструменте Quick Builder для улучшенного поиска адресов есть панель аналитики, с помощью которой можно изучать данные и делать выводы. Вы сможете узнать, насколько функция поиска адресов привлекательна для посетителей вашего сайта. При этом используются анонимизированные данные.

Этот отчет можно найти в разделе Отчеты о привлечении аудитории Cloud Console. Подробнее…

Поскольку Google Аналитика предлагает очень широкие возможности, мы не сможем предоставить здесь полные инструкции по настройке и использованию этого сервиса. Здесь мы расскажем только о том, какие данные вам понадобятся, чтобы анализировать статистику эффективности инструмента поиска адресов, а также предоставим ссылки на подробную информацию о сервисе и другие руководства.

Настройка Google Аналитики

Если вы уже используете в приложении Google Аналитику, переходите к следующему разделу.

Ниже приводится пример глобального тега, который необходимо добавить на сайт, чтобы включить Google Аналитику.

<!-- 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 Аналитики на сайт, вам необходимо понять, как делать следующее:

• активировать пользовательские взаимодействия, например клики, которые можно регистрировать независимо от просмотров страниц сайта (события);
• просматривать первичные данные (показатели), объединяя их в группы (параметры или специальные параметры).

Использование специальных событий

Ниже показано, как определить специальное событие в инструменте поиска адресов.

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

Необходимо дать событию (event) и методу (method) понятные названия, чтобы вам было проще анализировать данные в отчетах. Настройте их срабатывание при определенных взаимодействиях, например когда пользователь выбирает адрес в раскрывающемся меню с автозаполнением, как показано на скриншоте ниже.

Вы можете передавать в Google Аналитику показанный ниже запрос отслеживания, содержащий заданное вами событие и метод. Для удобства каждый параметр запроса показан в отдельной строке.

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 Аналитики выглядят в представлении "Проверка" на вкладке "Сеть" браузера. Чтобы увеличить изображение, нажмите на него.

Чтобы убедиться, что теги специальных событий настроены правильно, откройте представление "В режиме реального времени" в Google Аналитике. Например, событие location, срабатывающее при автозаполнении информации о месте, будет выглядеть в Google Аналитике следующим образом:

Также для отслеживания событий в реальном времени можно использовать отчет DebugView, как показано ниже. Обратите внимание, что доступ к полному отчету о событиях в Google Аналитике (Вовлечение > События) появится через 24 часа.

Вы также можете разрабатывать стратегии для привлечения посетителей в свои магазины и офисы с помощью инструмента поиска адресов и собирать данные. Например, в Google Аналитике есть решение для посещений магазинов, которое позволяет связать данные о посещении обычных магазинов (собранные в Google Рекламе) и статистику по инструменту поиска адресов. Вы также можете создавать стратегии привлечения пользователей приложения в ваши магазины и офисы, например с помощью онлайн-предложений, которыми можно воспользоваться только офлайн.

Показатели профиля компании

Помимо данных 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"
                   }
               }
           ]
       }
   ]
}

Ответ содержит ряд показателей, в частности:

• 1571 просмотр адреса на Google Картах;
• 631 просмотр адреса в Google Поиске;
• 3 запроса схемы проезда;
• 42 клика по предложению (LOCAL_POST_ACTIONS_CALL_TO_ACTION);
• 11 просмотров местных публикаций в Google Поиске.

Также для сбора показателей можно создать ссылки на действия с помощью функции Забронировать через Google. Информацию о кликах по таким ссылкам можно передавать в Google Аналитику, чтобы отслеживать конверсии. Подробнее…

Каким бы образом вы ни собирали показатели, с их помощью вы можете не только определять, достигаете ли вы KPI, но и анализировать, как изменения, которые вы вносите в функцию поиска адресов, влияют на результаты. Вы также можете сравнивать данные о работе этой функции из Google Аналитики и профиля компании. Например, сравнивая эти показатели, вы можете узнать, сколько клиентов прокладывают маршрут с помощью инструмента поиска и Google Карт, а затем посещают ваши физические магазины.

Дополнительные возможности

При необходимости вы можете расширить возможности инструмента поиска адресов.

Чтобы повысить удобство для пользователей, можно отправлять им ссылку на маршрут через SMS или по электронной почте. При нажатии на такую ссылку откроется приложение "Google Карты" (если оно установлено) или сайт maps.google.com в веб-браузере. И там, и там пользователь сможет запустить пошаговую навигацию, в том числе с голосовыми подсказками.

Чтобы создать URL маршрута, используйте URL Карт, как показано ниже. При этом закодированное название места укажите с помощью параметра destination, а идентификатор места – с помощью параметра destination_place_id. URL Карт предоставляются бесплатно, поэтому указывать в URL ключ API не нужно.

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

Вы также можете задать параметр запроса origin (в том же формате, что и параметр destination). Если вы не сделаете этого, то маршрут будет проложен от текущего местоположения пользователя, а оно не всегда совпадает с местом, в котором выполнялся поиск адреса. Также в URL Карт предусмотрены другие необязательные параметры запроса. Например, travelmode и dir_action=navigate позволяют запустить маршрут с включенной навигацией.

Эта ссылка – расширенная версия приведенного выше URL, в которой с помощью параметра origin указан пункт отправления (футбольный стадион), а с помощью параметра travelmode=transit – способ передвижения (на общественном транспорте).

Для отправки URL маршрута через SMS или по электронной почте рекомендуется использовать стороннее приложение, например twilio. Если вы работаете с App Engine, то можете отправлять SMS и электронные письма через сторонние компании. Подробнее…

Просмотр улиц предоставляет огромное количество снимков и позволяет заранее увидеть местность вокруг вашего офиса или магазина. Вы можете предоставлять пользователям интерактивные (веб) и статические (API) панорамы. Первые из них обеспечивают 360-градусный обзор и позволяют осмотреться. Просмотр улиц также доступен для Android и iOS.

В большинстве случаев местоположение пользователя можно определить за счет собственной геолокации устройства или браузера. Мы приводим пример того, как использовать функцию геолокации HTML5 браузера, чтобы показывать географическое местоположение пользователя или устройства на карте Google. Также есть документация о том, как запрашивать разрешения и получать данные о местоположении в Android и iOS. Иногда, однако, может потребоваться прибегнуть к альтернативному решению, например при отключенной геолокации устройства или подозрении на спуфинг.

Geolocation API – это серверный API, который возвращает информацию о местоположении и радиусе точности, полученную с помощью обнаруженных клиентом вышек сотовой связи и узлов Wi-Fi. Вы можете использовать этот API в качестве резервного механизма или для проверки данных, полученных от устройства.

Из раздела Предоставление сведений об адресах вы узнали, как показывать пользователям подробную информацию о ваших офисах или магазинах, такую как часы работы, фотографии и отзывы.

Рекомендуем изучить тарифы и уровни SKU для различных данных в новом Places API. Для оптимизации расходов можно объединять имеющиеся у вас сведения об адресах с новыми данными Google Карт, такими как статус "Временно закрыто", часы работы в праздничный день, оценки, фотографии и отзывы. Если у вас уже есть контактная информация, не указывайте эти поля в запросе информации о месте. Вы можете получать только те поля, которые хотите показывать пользователям.

Собственные сведения об адресах могут отображаться рядом с описанием места или вместо него. Посмотрите практическую работу по комплексной реализации инструмента поиска адресов. В этом примере показано использование GeoJSON с базой данных для хранения и получения собственных сведений об адресах.