Поддержка

На этой странице перечислены известные проблемы и решения для векторных карт и функций 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-тестирование, просим поделиться результатами оценки производительности векторных карт относительно растровых – они будут очень полезны для усовершенствования этой функции.