Styling Google Maps In Your Flutter App

Are you seeking to enhance the look of the Google Maps integration within your Flutter application, either by introducing a more sophisticated appearance or aligning it seamlessly with the overall theme of your application?

In this article, I will show the steps involved in accomplishing this task.

Creating your style

There are two approaches to styling Google Maps: utilizing the Styling Wizard or employing the Google Cloud Console. When opting for the Styling Wizard, the process involves importing the JSON information containing the styling requirements. Conversely, the Cloud Console provides a platform for creating and publishing styles, seamlessly reflecting the changes in your application.

Styling your google maps can be a somewhat daunting task due to the multitude of customization options available.

Each feature on the map can be customised by either changing the geometry or the label element which in turn is customised by fill or stroke properties, which also have separate customisation options like colour and saturation.

The silver lining in this context is that, as you undertake these customizations, the changes are observable in real-time.

Using the Styling Wizard

For the purpose of this article, I will be showing you how to use the Styling Wizard. One of my favourite things about using the Styling Wizard is that there are pre-customised themes available for you to use or build on. For example, if you want to Google Maps to blend with the night theme of your app. You can choose either, Dark, Night or Aubergine.
As stated earlier, the customisations you want to do can be done by changing the properties of either the geometry or label elements. When you are done and satisfised with the outcomes, click on Finish.

Afterwards, you should see this above, the next thing would be to copy the JSON, this is essentially the information about the customisations you've made.

Importing the style

Next thing would be to open your flutter project, ensuring you've already added google_maps_flutter to your project.

Next create a file in your assets directory in your flutter project named map_styles.json and paste the JSON there.
Then add it to the pubspec.yaml file in your project,



# The following section is specific to Flutter packages.
flutter:
  uses-material-design: true

  assets:
    - assets/map_style.json

After you've have added it, run flutter pub get so flutter is aware of this newly added asset.

Adding the style

In your project, this newly created style will be added to the GoogleMap widget.

First, would be to create a GoogleMapController variable that will provide access to the GoogleMap widget, it will enable you to do all sort of fun things, like in this case adding a customised map style.



import 'dart:async';

final Completer<GoogleMapController> _controller = Completer();

Next, create a string that would store the path to your map style. What I would recommend is to load it ahead of time before we eventually use, in initState().



import 'package:flutter/services.dart';

late String _mapStyleString;

@override
void initState() {

 rootBundle.loadString('assets/map_styles/map_style.json').then((string) {
      _mapStyleString = string;
  });
  super.initState();
}

Subsequently, within the GoogleMap widget, add the code responsible for configuring the customized map style.



GoogleMap(
  initialCameraPosition: const CameraPosition(
  target: LatLng(37.43296265331129, -122.08832357078792),
    zoom: 19.151926040649414,
  ),
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
    _controller.future.then((value) {
      value.setMapStyle(_mapStyleString);
    });
  },
)

In the provided code snippet, the GoogleMap style is set within the onMapCreated function, guaranteeing that the map is created before the style is applied.

Finally, run your code and you should see your maps looking good.

For this article, I customised it to blend with the default theme when a new project is created.

And this is the JSON below,



[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#523735"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c9b2a6"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c0d6dd"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#ae8f8f"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfc5ed"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d9afdf"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a7b93"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#7b77b1"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e2f74"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#3d6eff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#faf7fd"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#a268f8"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#b363e9"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d158e9"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#8c57db"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6e6482"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9afdf"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#83768f"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#e5d0ec"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dcafdf"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#bebad4"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#968d9a"
      }
    ]
  }
]

So next time your product designer brings to you a fancy looking map, you will have nothing to worry about.

If you found this helpful, like and share and feel free to drop suggestions and feedback.

Blog

Styling Google Maps In Your Flutter App

Ayevbeosa Iyamu

Creating your style

Using the Styling Wizard

Importing the style

Adding the style

Join Our Newsletter. No Spam, Only the good stuff.

Related