Многие разработчики столкнулись с ситуацией, когда стабильно работавшая годами интеграция с Google Maps API в среде 1С внезапно дала сбой: сама карта загружается, маршруты строятся, но маркеры (точки на карте) полностью исчезают. При этом в обычных браузерах (Chrome, Firefox) тот же самый код работает без нареканий. Проанализируем ситуацию и разберем по шагам, как вернуть работоспособность вашим картам.
Для начала проанализируем техническую сторону вопроса. В платформе 1С (особенно в версиях до 8.3.26) для отображения содержимого Поля HTML документа используется встроенный движок WebKit. Проблема заключается в том, что версия этого движка сильно устарела (примерно соответствует стандартам 2017 года).
Google Maps API постоянно обновляется. В последних версиях (начиная с 3.53 и выше) разработчики Google внедрили поддержку Advanced Markers (улучшенных маркеров), которые активно используют современные стандарты JavaScript, такие как Shadow DOM и Custom Elements. Старый WebKit, встроенный в 1С, просто «не понимает» эти конструкции и выбрасывает синтаксическую ошибку при попытке инициализации библиотеки маркеров. В итоге выполнение скрипта прерывается, и маркеры не отрисовываются.
Чтобы убедиться в этом самостоятельно, воспользуемся встроенными инструментами отладки. Нажмите на форму с картой и зажмите комбинацию клавиш Ctrl + Alt + Shift + F12. Откроется Web Inspector. Вкладка Console покажет вам ошибки инициализации скриптов, где, скорее всего, будет указано на отсутствие поддержки customElements или синтаксические ошибки в файлах API.
Поскольку основной причиной падения скрипта является отсутствие объекта customElements в устаревшем движке 1С, мы можем попробовать «обмануть» библиотеку Google Maps, создав пустую заглушку этого объекта. Это позволит скрипту продолжить выполнение, не вызывая критического исключения.
Рассмотрим пример кода, который необходимо добавить в ваш HTML-шаблон перед вызовом основного скрипта инициализации карты:
var customElements = {};
customElements.name = 'hello';
customElements.get = function() {
return customElements.name;
};
Важно: этот код должен быть определен до того, как вы начнете работать с объектами google.maps.Marker. Проанализируем ситуацию: данный хак работает для версии API 3.53, однако стоит понимать, что это лишь временная мера. Google постепенно отключает поддержку старых версий, и когда методы внутри API станут жестко требовать функционал customElements.define(), эта заглушка перестанет помогать.
Если вы используете стандартное подключение библиотеки через URL, рассмотрите возможность принудительного указания версии. Ранее помогал переход на квартальные версии (quarterly), которые более стабильны.
Посмотрим на структуру ссылки подключения:
https://maps.googleapis.com/maps/api/js?v=3.52&key=ВАШ_КЛЮЧ
Однако, как показывает практика, Google достаточно быстро удаляет старые версии из доступа. На текущий момент версия 3.52 уже недоступна, а на 3.53 и выше возникают описанные выше проблемы. Тем не менее, всегда стоит проверять текущие доступные версии в документации Release Notes Google Maps JavaScript API, чтобы временно «откатиться» на более стабильную для 1С версию.
Фирма 1С признала проблему устаревшего движка. Начиная с версии платформы 8.3.26, реализован переход на современный компонент WebView2 (на базе Chromium) для систем Windows. Это полностью решает проблему совместимости, так как движок будет поддерживать все современные стандарты JS (ES6+, Optional Chaining и т.д.).
Если ваша конфигурация и инфраструктура позволяют, обновление платформы — самый надежный путь. После обновления Поле HTML документа начнет использовать актуальный движок браузера, установленный в системе, и маркеры Google Maps заработают без дополнительных «костылей» в коде.
Если обновление платформы невозможно, а Google Maps продолжает работать нестабильно, проанализируем альтернативы, которые менее требовательны к версии WebKit:
Если вам нужно просто отобразить положение торговых точек без возможности интерактивного взаимодействия (масштабирования, перетаскивания), рассмотрим вариант использования Google Static Maps API. В этом случае 1С формирует URL-запрос, а Google возвращает обычную картинку (PNG/JPG) с уже нарисованными маркерами.
Пример формирования URL для статической карты:
https://maps.googleapis.com/maps/api/staticmap?center=46.46,30.71&zoom=14&size=600x300&markers=color:red|46.46,30.71&key=ВАШ_КЛЮЧ
Этот метод гарантированно работает в любой версии 1С, так как не использует JavaScript для отрисовки, а работает через объект Картинка или простой тег img в HTML.
Выясним краткий алгоритм действий при исчезновении маркеров:
customElements.