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

Лучшие практики 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 Maps. Если все стили вашей страницы определены во встроенном или связанном 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 box-sizing предоставляют возможный обходной путь для конфликтов стилей карт. Это может быть особенно полезно, если вы используете фреймворк 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;
}