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

Обзор

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

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

Для пользователей Locator Plus аналитическая панель помогает анализировать и получать ценную информацию на основе ваших данных, давая вам четкое представление о том, насколько хорошо ваши покупатели взаимодействуют с вашим поиском магазинов. Чтобы получить доступ к этому отчету, перейдите в раздел консоли «Отчеты о взаимодействии» . Дополнительные сведения об этом отчете см. в разделе Отчеты о взаимодействии .

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

Включение API

• API JavaScript Карт
• API мест
• API геокодирования
• API матрицы расстояний
• API маршрутов

Разделы реализации

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

• check_circle_filled Значок галочки — это основная практика.
• stars Значок звездочки — это необязательная, но рекомендуемая настройка для улучшения решения.

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

Есть несколько способов включить это: (1) использовать решение Quick Builder Locator Plus, чтобы обеспечить эту функциональность «из коробки», и (2) использовать собственную реализацию динамических карт. В этом разделе подробно описаны эти параметры.

Использование Quick Builder Locator Plus

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

Использование собственной реализации динамических карт

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

Во-первых, вам необходимо включить Maps JavaScript API на страницу. Это делается путем ссылки на следующий скрипт на вашей HTML-странице.

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

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

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

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

Следующим шагом будет настройка основных функций вашей карты. Это делается с помощью функции сценария initMap , указанной в URL-адресе сценария. В этом скрипте, показанном в следующем примере, вы можете установить исходное местоположение, тип карты и элементы управления, которые будут доступны на карте для ваших пользователей. Обратите внимание, что getElementById() ссылается на идентификатор div «карты», указанный выше.

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

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

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

У вас может быть база данных ваших местоположений с базовой информацией, такой как название этого места, его адрес и номер телефона. Чтобы получить информацию об этом месте, которую имеет платформа Google Maps, включая географические координаты и информацию, предоставленную пользователем, найдите идентификатор места , соответствующий каждому из мест в вашей базе данных. Вы можете вызвать конечную точку Find Place в Places API Place Search и запросить только поле place_id . Вот пример запроса идентификатора места для офиса Google в Лондоне:

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

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

Геокодирование ваших местоположений

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

Вот пример использования API геокодирования для получения широты и долготы идентификатора места, который был возвращен для офиса Google в Лондоне:

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

Добавление локаций на карту

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

Если у вас есть широта и долгота вашего местоположения, вот пример добавления маркера на карту:

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);

С помощью нескольких маркеров вы можете увидеть расположение нескольких локаций вместе.

Если имеется большое количество местоположений, вы можете рассмотреть возможность использования утилиты кластеризации маркеров для JavaScript , Android или iOS . Ниже приведен пример кластеризации маркеров в образце локатора магазинов JavaScript на GitHub.

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

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

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

     
  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°.

В следующем примере кода для карты задается высокий уровень масштабирования, совместимый тип карты и угол наклона, при котором изображения будут отображаться под углом 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 Maps на мобильных устройствах и в Интернете. Когда пользователь вводит адрес, автозаполнение заполняет остальное с помощью виджетов. Вы также можете предоставить свою собственную функцию автозаполнения напрямую, используя библиотеки Places.

Чтобы добавить библиотеку автозаполнения мест на свой сайт, достаточно добавить пару параметров запроса в URL-адрес сценария Maps JavaScript API. В следующем примере добавлением является libraries=places .

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

Затем добавьте на свою страницу текстовое поле для ввода данных пользователем.

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

Наконец, вам необходимо инициализировать службу автозаполнения и связать ее с указанным текстовым полем. Ограничение подсказок автозаполнения мест типами геокодирования позволяет настроить поле ввода для приема уличных адресов, районов, городов и почтовых индексов, чтобы пользователи могли вводить любой уровень детализации для описания своего происхождения. Обязательно запросите поле 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);
}

Затем вы сможете увидеть связь между пользователем и любыми конкретными местоположениями, как показано на следующем изображении.

Как только вы узнаете местоположение пользователя, вы можете сравнить его с вашим местоположением. Делая это с помощью службы Distance Matrix, Maps JavaScript API помогает вашим пользователям выбирать местоположение, наиболее удобное для них с точки зрения времени в пути или расстояния по дороге.

Отображение местоположений рядом с пользователем означает, что ваши местоположения уже заполнены. При использовании собственной базы данных местоположений важно убедиться, что данные представлены в формате, который можно использовать на карте, например GeoJSON, как описано в разделе «Уровень данных» .

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

Служба Distance Matrix работает, собирая список пунктов отправления и назначения и возвращая не только расстояние поездки, но и время между ними. В случае пользователя источником будет то место, где он находится в данный момент, или желаемая отправная точка, а пунктами назначения будут те же местоположения. Исходные точки и пункты назначения могут быть указаны как пары координат или как адреса; последний будет сопоставлен при вызове службы. Вы можете использовать матрицу расстояний с рядом дополнительных параметров, чтобы отображать результаты на основе текущего или будущего времени вождения.

В следующем примере вызывается служба Distance Matrix, указывающая происхождение пользователя и местоположения. В этом примере показано расстояние от центра карты до трех офисов Google в Лондоне.

Краткий справочник по кодированию URL-адресов: %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
      &solution_channel=GMP_guides_locatorplus_v2_a

Вот версия, которую вы можете скопировать и запустить:

      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&solution_channel=GMP_guides_locatorplus_v2_a

Фактическим ответом службы будет список совпадающих адресов, расстояний и продолжительностей, аналогичный показанному в следующем примере:

{
    "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) и пункты назначения на карте:

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

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

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

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

Служба маршрутов также имеет функции, которые позволяют обрабатывать результаты и легко отображать их на карте.

Ниже приведен пример отображения панели направлений. Дополнительную информацию об образце см. в разделе «Отображение направлений текста» .

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

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

Есть несколько способов включить это: (1) использовать решение Quick Builder Locator Plus, чтобы обеспечить эту функциональность «из коробки», и (2) использовать свой бизнес-профиль . В этом разделе подробно описаны эти параметры.

Использование Quick Builder Locator Plus

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

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

Использование бизнес-профиля для записи на прием

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

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

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

1. Создайте API бизнес-профиля placeActionLink для местоположения типа APPOINTMENT , ONLINE_APPOINTMENT или DINING_RESERVATION . 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 Maps.

   Когда пользователи просматривают сведения о месте, они просматривают сведения об идентификаторе места на платформе Google Maps. Идентификатор места связан с идентификатором местоположения в бизнес-профиле, поэтому вам необходимо найти идентификатор местоположения на основе идентификатора места на карте, чтобы получить и отобразить созданную вами ссылку для записи на прием. Выполните следующие вызовы API бизнес-профиля:

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

3. С помощью идентификатора местоположения вы можете получить нужную ссылку на действие. Чтобы получить существующую встречу placeActionLink , перечислите существующие placeActionLinks для местоположения и отфильтруйте placeActionType , чтобы найти ссылку на встречу, которую вы хотите использовать ( APPOINTMENT , ONLINE_APPOINTMENT или DINING_RESERVATION ).

   В следующем примере показано APPOINTMENT placeActionLink в ответе на вызов LIST.

    {
      "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 Locator Plus , проверьте на своей платформе бронирования встреч документацию по встраиванию виджета бронирования в веб-сайт или приложение. Другой вариант — использовать Google Cloud, например Cloud Spanner, для управления запасами (видео).

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

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

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

1. С помощью API Google My Business создайте любые сообщения с предложениями, которые вы хотите отображать, типа OFFER .

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

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

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

   Ниже приведен пример запроса сведений о местоположении в API профиля компании:

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

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

   Разверните, чтобы увидеть пример ответа.

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

   Вот пример запроса на получение списка активных локальных сообщений для определенного местоположения:

   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 (веб) , Android и iOS .

Стилизация вашей карты

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

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

Разверните, чтобы увидеть анимацию создания и стилизации стиля карты в Cloud Console:

Стили карты отрасли

Эта анимация показывает предопределенные отраслевые стили карт, которые вы можете использовать. Эти стили обеспечивают оптимальную отправную точку для каждого типа отрасли. Например, стиль карты «Розничная торговля» уменьшает количество точек интереса на карте, позволяя пользователям сосредоточиться на ваших местоположениях, а также на ориентирах, которые помогают им добраться до ближайшего местоположения максимально быстро и уверенно.

Точки контроля интересов

Эта анимация устанавливает цвет маркеров для точек интереса и увеличивает плотность POI в стиле карты. Чем выше плотность, тем больше маркеров POI появляется на карте.

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

Включив один или несколько map_ids в URL-адрес скрипта, 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 (Web) , Android и iOS .

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

Чтобы получить доступ к этому отчету, перейдите в раздел отчетов о взаимодействии в облачной консоли . Для получения более подробной информации об этом отчете см. Отчеты о взаимодействии .

Учитывая мощность и гибкость 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 Tag Manager или добавляете 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 Analtics появляется в осмотре браузера, на вкладке «Сеть». (Нажмите, чтобы увеличить).

Вы можете убедиться, что ваши пользовательские теги событий должным образом отражаются, просмотрев представление «в реальном времени» в Google Analytics. Например, в Google Analytics появляется событие «местоположение», настраиваемое для AutoComplete Place, как показано на следующих рисунках.

В качестве альтернативы вы можете отслеживать события в реальном времени, используя DebugView, как показано на следующем рисунке. Обратите внимание, что вам нужно подождать 24 часа, прежде чем получить доступ к полному отчету о событиях в разделе «Вовлеченность> события Google Analytics».

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

Метрики профиля бизнеса

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

Следующий пример запроса на 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.

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

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

Улучшение локаторов плюс

В зависимости от потребностей вашего бизнеса или пользователей, вы можете дополнительно улучшить опыт пользователя.

Чтобы пользователям было еще проще добраться до места, вы можете написать или отправить им ссылку на направление. Когда они нажимают на него, приложение Google Maps будет запущено на своем телефоне, если оно будет установлено, или maps.google.com загрузится в веб -браузер их устройства. Оба эти опыта предоставляют пользователю возможность использовать навигацию по поворотам, включая голосовое руководство, для достижения пункта назначения.

Используйте URL-адреса MAPS для составления URL-адреса направления, подобного следующему, с именем места, кодируемого URL, в качестве параметра destination и поместите идентификатор в качестве параметра destination_place_id . Не существует затрат на составление или использование URL -адресов карт, поэтому вам не нужно включать ключ API в URL.

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

Вы можете предоставить параметр origin запроса, используя тот же формат адреса, что и пункт назначения. Но, опуская его, направления начинаются с текущего местоположения пользователя, которое может отличаться от того, где он использовал ваше приложение Locator Plus. URL -адреса MAPS предоставляют дополнительные параметры параметров запроса, такие как travelmode и dir_action=navigate , чтобы запустить указания с включенным навигацией.

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

Чтобы отправить текст или электронную почту, содержащую этот URL-адрес, в настоящее время мы рекомендуем использовать стороннее приложение, такое как Twilio . Если вы используете App Engine, вы можете использовать сторонние компании для отправки SMS-сообщений или электронной почты. Для получения дополнительной информации см. Отправка сообщений со сторонними услугами .

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

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

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

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

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

У вас могут быть данные собственного места для дополнения или использования вместо деталей места. CodeLab для локатора полного стека содержит пример использования Geojson с базой данных для хранения и получения собственных данных местоположения.