Update iOS Google Maps mapStyle on environment colorScheme change (dark mode)

Question

When changing device settings between light mode and dark mode my Google Maps mapStyle is not updating. The other views successfully toggle to the selected mode, it's just the map that doesn't change.

The mapStyle does change correctly when my app is restarted.

struct MapView: UIViewRepresentable {

  @Environment(\.colorScheme) var colorScheme

  private let mapView = GMSMapView(frame: .zero)
  private let defaultZoomLevel: Float = 10

  func makeUIView(context: Context) -> GMSMapView {
    
    mapView.delegate = context.coordinator
    applyColorSchemeToMap()
  
    return mapView
  }

  func updateUIView(_ mapView: GMSMapView, context: Context) {
    
    applyColorSchemeToMap()
  }
  
  func applyColorSchemeToMap() {
    do {
      if let styleURL = Bundle.main.url(forResource: colorScheme == .dark ? "night_map_style" : "map_style", withExtension: "json") {
        mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
      } else {
        NSLog("Unable to find style.json")
      }
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }
  }

swiftPunk · Accepted Answer · 2021-12-03 14:09:21Z

1

Here is a way for you:

struct ContentView: View {

    @Environment(\.colorScheme) var colorScheme

    var body: some View {

        MapView(colorScheme: colorScheme)
        
    }
}



struct MapView: UIViewRepresentable {

    var colorScheme: ColorScheme
    private let mapView = GMSMapView(frame: .zero)
    private let defaultZoomLevel: Float = 10

    func makeUIView(context: Context) -> GMSMapView {

        mapView.delegate = context.coordinator
        applyColorSchemeToMap()

        return mapView
    }

    func updateUIView(_ mapView: GMSMapView, context: Context) {
        applyColorSchemeToMap(colorScheme: colorScheme)
    }

    func applyColorSchemeToMap(colorScheme: ColorScheme) {
        do {
            if let styleURL = Bundle.main.url(forResource: (colorScheme == .dark) ? "night_map_style" : "map_style", withExtension: "json") {
                mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
            } else {
                NSLog("Unable to find style.json")
            }
        } catch {
            NSLog("One or more of the map styles failed to load. \(error)")
        }
    }
}

answered Dec 3, 2021 at 14:09

swiftPunk

1

Sign up to request clarification or add additional context in comments.

1 Comment

Angus Over a year ago

That hasn't seemed to change anything. I am testing on the simulator rather than a physical device. Don't know if that affects anything?

Angus · Accepted Answer · 2021-12-29 17:40:34Z

0

I found the issue. MapView must conform to UIViewControllerRepresentable, not UIViewRepresentable.

A guide on how to achieve this (using a ViewControllerBridge) can be found here:

https://developers.google.com/codelabs/maps-platform/maps-platform-ios-swiftui#0

answered Dec 29, 2021 at 17:40

Angus

3132 silver badges11 bronze badges

Comments

Mohit Padalia · Accepted Answer · 2025-11-21 11:46:46Z

0

For anyone who is looking for how to switch between light and dark mode on Google map iOS SDK, the newer SDK support this without creating styles

let options = GMSMapViewOptions()
// Map is init to use light mode by default.
let mapView = GMSMapView(options: options)
// Set map to use dark mode.
mapView.overrideUserInterfaceStyle = .dark
// Set map to use light mode.
mapView.overrideUserInterfaceStyle = .light
// Set map to use dark/light mode based on the value of traitCollection.userInterfaceStyle
mapView.overrideUserInterfaceStyle = .unspecified

Ref: Map color scheme

answered Nov 21 at 11:46

Mohit Padalia

1,57913 silver badges11 bronze badges

Collectives™ on Stack Overflow

Update iOS Google Maps mapStyle on environment colorScheme change (dark mode)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related