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

Лучшие практики JS

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

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

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

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

Лучшие практики CSS

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

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

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

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

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

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

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

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

#map img
{
    max-width : none;
}

Имена классов

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

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

Переопределение размера блока CSS

Переопределение размера блока в 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;
}