Поддержка

На этой страниц�� п��речислены известные проблемы и решения для векторных карт и функций WebGL.

Поддержка браузеров и устройств

Предварительная версия функции WebGL поддерживает те же браузеры и устройства, что и Maps JavaScript API. Чтобы узнать, будет ли браузер на определенном устройстве поддерживать WebGL, посетите get.webgl.org или caniuse.com. Также убедитесь, что в настройках браузера включено аппаратное ускорение. Если оно отключено, векторные карты будут преобразованы в растровые.

Растровая карта или векторная?

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

Как проверить возможности браузера Chrome

Чтобы проверить, какие возможности аппаратного ускорения используются в определенной установке браузера Chrome, откройте страницу chrome://gpu/ и посмотрите, включены ли (отмечены ли зеленым цветом) следующие настройки:

  • OpenGL: Enabled
  • WebGL: Hardware accelerated
  • WebGL2: Hardware accelerated

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

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

Чтобы векторные карты поддерживались, в большинстве браузеров необходимо включить аппаратное ускорение. В браузерах Chrome и Microsoft Edge для этого нужно открыть раздел Настройки, выбрать в меню пункт Система и включить настройку Использовать аппаратное ускорение (при наличии).

Как программно проверить тип карты

Проверить, растровая карта или векторная, можно с помощью метода map.getRenderingType(). Ниже приведен пример кода, который отслеживает событие renderingtype_changed и выводит информационное окно, где указан тип карты.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

Вы также можете использовать контекст отрисовки WebGL, чтобы проверить, поддерживается ли WebGL 2.

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

Узнайте, как ещё можно программно определить контекст отрисовки WebGL.

Поддержка мобильных устройств

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

Ошибки

Известные ошибки

  • Ошибка в браузере Chrome на некоторых устройствах macOS с графическими процессорами AMD. Может доставлять сильные неудобства, когда на устройстве macOS установлено несколько графических процессоров, переключение между которыми происходит автоматически (векторные карты становятся недоступны, когда запущены другие приложения или ��од��лючен в��е��ний ��онитор). Во многих случаях ошибку удавалось устранить за счет серверного кода Metal для ANGLE. О планах развертывания этого кода можно узнать по ссылке https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Как сообщить о проблеме

  • Прежде чем сообщать о проблеме, обновите браузер и драйвер графического процессора до последней версии.
  • Убедитесь, что на странице chrome://settings/system (Chrome), about:preferences#general (Firefox) или edge://settings/system (Microsoft Edge) включено аппаратное ускорение. В браузере Safari оно используется по умолчанию в macOS версии 10.15 или выше. В более ранних версиях macOS проверьте переключатель "Использовать аппаратное ускорение" в расширенных настройках Safari.
  • Добавьте в отчет об ошибке ссылку на пример кода JSFiddle.
  • Если у вас возникли проблемы с отрисовкой, добавьте также скриншот страницы chrome://gpu (Chrome), about:support (Firefox) или edge://gpu (Microsoft Edge) и сведения о графическом процессоре.

Поделитесь своим мнением

Мы тщательно изучаем ваши отзывы, чтобы усовершенствовать векторные карты. Просим сообщить нам, если:

  • В ваших веб-приложениях возникнут новые ошибки JavaScript или другие ошибки или сбои.
  • Задержка запуска для векторных карт значительно больше, чем для растровых. Для ее анализа полезно использовать показатели регрессии задержки запуска. В целом нас интересует, выходит ли задержка за допустимые пределы.
  • При работе с векторными картами отрисовка выполняется не очень плавно. Как соотносятся ваши показатели частоты кадров в секунду или временного зависания для векторных и растровых карт?
  • Производительность сильно различается в разных браузерах.

Если вы провели A/B-тестирование, просим поделиться результатами оценки производительности векторных карт относительно растровых – они будут очень полезны для усовершенствования этой функции.