Объявление. Скоро на платформе Google Maps появится новый стиль базовой карты. Это обновление стиля карты включает новую цветовую палитру по умолчанию, модернизированные булавки, а также улучшения интерфейса и удобства использования карты. Все стили карт будут автоматически обновлены в марте 2025 г. Дополнительную информацию о доступности и о том, как принять участие раньше, см. в разделе Новый стиль карты для платформы Google Maps .

Эта страница переведена с помощью Cloud Translation API.

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

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

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

Библиотеки, о которых известно, что они несовместимы с 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 с API JavaScript Карт, поскольку 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 API JavaScript Maps. Это не поддерживается и может привести к критическим изменениям на вашем веб-сайте без предварительного уведомления. Вместо этого мы рекомендуем вам создавать собственные классы 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;
}

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

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

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

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

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

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

Специфика

#map img
{
    max-width : none;
}

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

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

Создайте переопределение 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;
}

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

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

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

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

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

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

Специфика

#map img
{
    max-width : none;
}

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

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

Создайте переопределение 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;
}

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

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

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

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

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

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

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

Специфика

#map img
{
    max-width : none;
}

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

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

Создайте переопределение 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;
}