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

Рекомендации по использованию JavaScript

API карт на JavaScript работает только со стандартной средой ECMAScript и DOM W3C. Это означает, что изменение или переопределение поведения встроенных классов и объектов, предоставляемых браузером, может привести к неработоспособности API карт на JavaScript. Иногда другие библиотеки могут конфликтовать с API карт на JavaScript, изменяя поведение браузера таким образом, что он перестает работать в стандартной среде ECMAScript. API карт на JavaScript несовместим с такими библиотеками.

Библиотеки, которые, как известно, несовместимы с JavaScript API карт:

  • Прототип: переопределяет Array.from() и Element.prototype.remove() нестандартным способом.
  • MooTools (более старые версии): переопределяет Array.from() нестандартным способом.
  • DateJS (в старых версиях): переопределяет метод Date.now() нестандартным способом.

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

Рекомендации по использованию CSS

При добавлении или настройке карты с помощью JavaScript API для карт некоторые стили, применяемые к вашей веб-странице, могут переопределять стили карты и вызывать конфликты CSS. Если вы используете CSS-фреймворк или компонент JavaScript для стилизации, это может привести к дополнительным конфликтам CSS со стилями вашей карты.

В CSS-фреймворках и компонентах стилизации на JavaScript часто используется CSS-сброс или нормализатор для обработки различий в отображении между браузерами. Фреймворки часто используют элемент ` box-sizing для масштабирования полей и границ элементов веб-страницы. Обычно это включает изменение поведения браузера по умолчанию с content-box на border-box .

Такой тип сброса CSS может вызвать конфликты CSS с JavaScript API карт, поскольку API не поддерживает изменения в таблице стилей пользовательского агента. Дополнительные конфликты CSS могут возникнуть, если фреймворк или компонент ссылается на классы CSS или элементы DOM JavaScript API карт.

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

Специфичность

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

Типичные элементы CSS, такие как img , button и a могут быть переопределены стилями вашей страницы. Один из наиболее распространенных сценариев — когда атрибут max-width элемента img установлен на 100 процентов. Это может привести к искажению или скрытию компонентов карты, особенно если вы используете InfoWindow .

Чтобы исправить эту проблему, вы можете изменить элемент img для вашей карты, установив для атрибута max-width значение ` none . Например:

#map img
{
    max-width : none;
}

Названия классов

Не используйте имена классов и внутренние элементы DOM API JavaScript Maps. Это не поддерживается и может привести к необратимым изменениям на вашем веб-сайте без предварительного уведомления. Вместо этого мы рекомендуем создавать собственные CSS-классы в качестве контейнеров для вашей карты.

Если CSS-фреймворк или JavaScript-компонент используют подобные ссылки, наша рекомендация по переопределению параметра box-sizing может послужить обходным решением.

CSS box-size override

Переопределение параметра `box-sizing` в CSS предоставляет возможный способ обойти конфликты стилей карт. Это может быть особенно полезно, если вы используете CSS-фреймворк или компонент стилизации на JavaScript. Например, если box-sizing установлено на border-box , попробуйте следующее:

  • Создайте параметр box-sizing , который устанавливает для элемента <html> свойство border-box .
  • Используйте box-sizing: inherit для всех элементов, кроме карты.
  • Создайте пользовательский контейнер карты, который сбрасывает значение элемента box-sizing до initial .

Пример CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}