Flutter | Syncfusion flutter map package | How we change the map styling with google maps?

Question

I am using the syncfusion_flutter_maps package to import the google maps in my flutter app but not able to change the map styling with it. It needs urlTemplate for that. How we can use google map styling here? like we use to do in our flutter google map package by simply providing the json file.

In this package we need the urlTemplate; You can checkout here: https://help.syncfusion.com/flutter/maps/tile-layer

Here, they are using some openStreetMap url templates but I want to use google maps styling. Let me know if someone has done that.

SfMaps(
          layers: <MapLayer>[
            MapTileLayer(
              /// URL to request the tiles from the providers.
              ///
              /// The [urlTemplate] accepts the URL in WMTS format i.e. {z} —
              /// zoom level, {x} and {y} — tile coordinates.
              ///
              /// We will replace the {z}, {x}, {y} internally based on the
              /// current center point and the zoom level.
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // Want to use google maps styling here. How can I do that?
              zoomPanBehavior: _zoomPanBehavior,
              controller: _mapController,
              initialMarkersCount: _worldWonders.length,
              tooltipSettings: const MapTooltipSettings(
                color: Colors.transparent,
              ),
              markerTooltipBuilder: (BuildContext context, int index) {
                if (!_isDesktop) {
                  return ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                    child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(
                            width: 150,
                            height: 80,
                            color: Colors.grey,
                            child: Image.asset(
                              _worldWonders[index].tooltipImagePath,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(
                                left: 10.0, top: 5.0, bottom: 5.0),
                            width: 150,
                            color: Colors.white,
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    _worldWonders[index].place,
                                    style: const TextStyle(
                                        fontSize: 14,
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 5.0),
                                    child: Text(
                                      _worldWonders[index].state +
                                          ', ' +
                                          _worldWonders[index].country,
                                      style: const TextStyle(
                                          fontSize: 10, color: Colors.black),
                                    ),
                                  )
                                ]),
                          ),
                        ]),
                  );
                }

                return const SizedBox();
              },
              markerBuilder: (BuildContext context, int index) {
                final double _markerSize =
                    _currentSelectedIndex == index ? 40 : 25;
                return MapMarker(
                  latitude: _worldWonders[index].latitude,
                  longitude: _worldWonders[index].longitude,
                  alignment: Alignment.bottomCenter,
                  child: GestureDetector(
                    onTap: () {
                      if (_currentSelectedIndex != index) {
                        _canUpdateFocalLatLng = false;
                        _tappedMarkerIndex = index;
                        _pageViewController.animateToPage(
                          index,
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.easeInOut,
                        );
                      }
                    },
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 500),
                      height: _markerSize,
                      width: _markerSize,
                      child: FittedBox(
                        child: Icon(Icons.access_alarm,
                            color: _currentSelectedIndex == index
                                ? Colors.blue
                                : Colors.green,
                            size: _markerSize),
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),

Answer 1

Query 1: How to use Google Maps in syncfusion flutter maps?

The tile layer in the SfMaps widget supports requesting tiles from the different tile providers through a unique URL. As per the below documentation, google also provides support for tile requests through its unique URL and it needs an API key.

https://developers.google.com/maps/documentation/tile/

However, there seems to be restrictions in accessing the Google Maps Tile API for general usage as specified in the above link. Hence, confirm with the Google sales team regarding this support from Google.

The SfMaps tile layer is not limited or specific to any of the tile providers. It supports requesting tiles from any of the tile providers using the unique URL for respective tile providers and renders them. All it needs is a URL in a certain format. Check the below user guide documentation to know more about the setting URL template.

https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template

Query 2: How we can use Google Maps styling here?

In SfMaps, there is no direct support for styling like google maps. But, you can change the style of the maps by setting the style type in the URL template itself. For that, you can check the exact URL format needed for the providers on their official websites. So, check is there any option like this in the google maps URL template for styling.

https://developers.google.com/maps/documentation/tile/

However, there seems to be restrictions in accessing the Google Maps Tile API for general usage as specified in the above link. Hence, confirm with the Google sales team regarding this support from Google.