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

Рекомендации по работе с 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() нестандартным способом.

Из несовместимых библиотек иногда можно удалить нестандартные переопределения.

Оптимизация внутренней эффективности

Чтобы ускорить загрузку страниц, Maps JavaScript API может откладывать загрузку интерактивного контента до тех пор, пока элемент или контейнер не приблизится к области просмотра. Эти внутренние оптимизации могут быть изменены в любое время без уведомления. Они предназначены для повышения эффективности и не должны использоваться в качестве механизма управления оплатой. Чтобы плата не взималась до того, как элемент станет видимым, отложите его создание в коде приложения.

Рекомендации по работе с 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-элементы Maps JavaScript 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;
}