Flutter + Google Maps: how to remove system markers?

Question

I am developing a flutter app, trying to add Google Maps using the official plugin, however, there are tons of system markers that I don't know how to remove.

The markers are from Google's own database, but we really don't need that extra information, they are causing issues with our users because users thought the markers are from our own app! Big user experience issue.

I couldn't find a switch or something like that from the class GoogleMap.

Any ideas? thanks!

Toffey

Answer 1

This can be achieved by applying custom google map styles to your google map.

To create custom google map styling. Use this tool to generate a map_style.json and save it in your assets folder. (Make sure it is referenced in pubspec.yaml aswell).

  //this is the function to load custom map style json
  void changeMapMode(GoogleMapController mapController) {
    getJsonFile("assets/map_style.json")
        .then((value) => setMapStyle(value, mapController));
  }
  
  //helper function
  void setMapStyle(String mapStyle, GoogleMapController mapController) {
    mapController.setMapStyle(mapStyle);
  }
  
  //helper function
  Future<String> getJsonFile(String path) async {
    ByteData byte = await rootBundle.load(path);
    var list = byte.buffer.asUint8List(byte.offsetInBytes,byte.lengthInBytes);
    return utf8.decode(list);
  }

Implement it like this in your google map widget:

     GoogleMap(
        ...
        onMapCreated: (GoogleMapController c) {
          yourMapController = c;
          changeMapMode(yourMapController);
        },
      ),

Aerialist