Как правильно подойти к вопросу: в актуальной версии google maps нельзя в коде менять стили для карты?

Ссылка скопирована
1 ответ

Сейчас ситуация такая: опция 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
Backend-редакция Ответ

В новых версиях 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 и передавайте корректный массив стилей.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно