Styling Google Maps In Your Flutter App
Tags: flutter, tutorial, googlemaps
Published: 2023-11-10 08:47:18

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](https://mapstyle.withgoogle.com/) or employing the Google Cloud Console. When opting for the [Styling Wizard](https://mapstyle.withgoogle.com/), 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.

![Sample of Google Maps Platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r113zc7hf0xcpu4y6c4.png)

---

## Using the Styling Wizard
For the purpose of this article, I will be showing you how to use the [Styling Wizard](https://mapstyle.withgoogle.com/). 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.

![How to copy your JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9tierciunwjxtuw59nq.png)

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](https://pub.dev/packages/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,

```yaml
# 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.

```dart
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()`.

```dart
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.

```dart
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.

![Mobile screen showing a styled google maps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqw62aobw5t6ssibns2g.png)

And this is the JSON below,

```json
[
  {
    "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.