CODEWITHSUNDEEP
fluttergoogle-mapsdartflutter-dependencies
Filled Stacks
Filled Stacks

Reputation: 4346

Flutter iOS Map styles not applied

I want to hide all the landmarks and other indicators on the map in my flutter maps. I've implemented map styles for the google maps package (google_maps_flutter). The style shows up fine on Android but not on iOS. There are no error messages or any exceptions being thrown by the map. I'm hoping to get some insights into why that may be. I have the latest version of the plugin 1.0.3. Below is my style and Flutter doctor output.

Flutter style

[
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Here is my flutter doctor

[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.6 19G2021, locale en-ZA)
• Flutter version 1.22.0 at /Users/danemackier/flutter
• Framework revision d408d302e2 (4 weeks ago), 2020-09-29 11:49:17 -0700
• Engine revision 5babba6c4d
• Dart version 2.10.0



[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/danemackier/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.1

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.50.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.15.1

[✓] Connected device (1 available)
    • iPhone 11 Pro Max (mobile) • 400921E6-429C-44D7-B113-F979A171C48A • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

• No issues found!

Upvotes: 0

Views: 912

Answers (1)

Elian Ortega
Elian Ortega

Reputation: 98

If you are trying to get a map with no landmarks notation:

  1. Use https://mapstyle.withgoogle.com/ there you can style the map with a web UI and see the final style in the map. If you scroll you'll see a FINISH button, then a Dialog will appear where you can copy the JSON

  2. Then just paste that json in a .txt file in the assets of your flutter app

    For example assets/map_style.txt

  3. Place the GoogleMap in a stateful widget

Declare:

String _mapStyle
GoogleMapController controller;

Then in the init State:

@override
 void initState() {
    rootBundle.loadString('assets/map_style.txt').then((string) {
      _mapStyle = string;
    });
    super.initState();
 }

void _onMapCreated(GoogleMapController controller) {
    this.controller = controller;
    controller.setMapStyle(_mapStyle);
}

The _onMapCreated is assigned to the GoogleMap widget in the parameter onMapCreated

Upvotes: 1

Related Questions