Как правильно подойти к вопросу: в актуальной версии google maps нельзя в коде менять стили для карты?
Ссылка скопирована
Сейчас ситуация такая: опция styles не работает, использую так
const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const silverStyle: any = await this.http.get('/data/google/silver.json').toPromise(); const darkStyle: any = await this.http.get('/data/google/dark.json').toPromise(); // Инициализация карты this.map = new Map(this.mapEl.nativeElement, { center: { lat: 40.4096, lng: 49.8671 }, zoom: 14, styles: isDarkMode, mapId: 'DEMO_MAP_ID' });
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
Safari
Почему снова флагнули домен в safari?
1 ответ

В новых версиях Google Maps поведение зависит от того, используете ли вы обычный raster map или cloud-based map styling через mapId. Если в настройках карты указан mapId, то локальный параметр styles может не применяться так, как раньше. Для современных карт Google продвигает стили через Google Cloud Console, привязанные к конкретному Map ID.
В вашем примере есть важная ошибка: в styles передается isDarkMode, а не массив стилей. Параметр styles ожидает массив объектов стиля, например silverStyle или darkStyle. Если isDarkMode - boolean, стили не применятся.
const style = isDarkMode ? darkStyle : silverStyle; this.map = new Map(this.mapEl.nativeElement, { center: { lat: 40.4096, lng: 49.8671 }, zoom: 14, styles: style });const style = isDarkMode ? darkStyle : silverStyle; this.map = new Map(this.mapEl.nativeElement, { center: { lat: 40.4096, lng: 49.8671 }, zoom: 14, styles: style });
Если вы используете mapId, попробуйте временно убрать его и проверить, применяются ли styles. Если без mapId стили заработали, значит конфликт именно с cloud styling.
this.map = new Map(this.mapEl.nativeElement, { center: { lat: 40.4096, lng: 49.8671 }, zoom: 14, styles: style // mapId убран для проверки });this.map = new Map(this.mapEl.nativeElement, { center: { lat: 40.4096, lng: 49.8671 }, zoom: 14, styles: style // mapId убран для проверки });
Для переключения темы после инициализации карты можно использовать setOptions:
this.map.setOptions({ styles: isDarkMode ? darkStyle : silverStyle });this.map.setOptions({ styles: isDarkMode ? darkStyle : silverStyle });
Проверьте также, что JSON со стилем действительно массив, а не объект с полем styles. Часто файл экспортируется в формате { styles: [...] }, и тогда нужно передать silverStyle.styles.
Вывод: менять стили в коде по-прежнему можно, но не смешивайте локальный styles и cloud Map ID без понимания приоритета. Если нужен управляемый стиль через консоль Google - делайте отдельные Map ID для светлой и темной темы. Если нужен динамический стиль в коде - уберите mapId и передавайте корректный массив стилей.