CODEWITHSUNDEEP
fluttergoogle-mapsgoogle-maps-markersmarker
xmanreturn
xmanreturn

Reputation: 109

Flutter + Google Maps: how to remove system markers?

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!

System markers

Upvotes: 5

Views: 3973

Answers (1)

Muhammad Hussain
Muhammad Hussain

Reputation: 1244

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);
        },
      ),

Upvotes: 17

Related Questions