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

Рекомендации по работе с JS

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

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

  • Prototype: переопределяет 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 %. Это может привести к искажению или скрытию компонентов карты, особенно при использовании информационного окна.

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

#map img
{
    max-width : none;
}

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

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

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

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