flutter 的谷歌地图和谷歌移动广告不能一起使用

Question

I created an app which use both google maps flutter plugin and google mobile ads plugin. The problem came only after implementing the mobile ads. Initially the google map loaded very well and was working fine. After installing the mobile ads plugin the problem arose.

The problem is, on initiation of the app, the map loads (as it loads faster than the adWidget). But the moment the adwidget Loads, the whole map becomes black. Sometimes, the "Google" sign appears on the bottom left. But when I tap on the map and then move the camera, the app seems to load as usual, and the moment I release the map stops loading (or loads only a part of the map). I've tried this without the adWidget, and there is no problem when working without it. The problem only arises when the two are together. Anyone having the same issue?

Answer 1

@highdragon I had the same issue and found a workaround rather than a solution but I hope it will help you. The workaround is to display the ad at a menu or any other place where the map isn't showing, it isn't perfect, but for now it will have to do the trick. Also you can give it a custom size using:

final AdSize adSize = AdSize(width: 250, height: 100);

And then when inserting the size:

 size: adSize,

Where's a full example:

@override
  void didChangeDependencies(){
    final AdSize adSize = AdSize(width: 250, height: 100);
    super.didChangeDependencies();
    final adHelper = Provider.of<AdHelper>(context);
    adHelper.initialization.then((status){
      setState(() {
        banner ??= BannerAd(
        adUnitId: AdHelper.bannerAdUnitId,
        size: adSize,
        request: AdRequest(),
          listener: AdListener(
            onAdLoaded: (Ad ad) {
              print('Ad loaded: $BannerAd.');
              bannerCompleter.complete(ad as BannerAd);
              },

......

And at the place you want to show the ad:

......
              if (banner == null)
            SizedBox(height: 50,)
              else
              Container(
                width: 250,
              height: 100,
              child: AdWidget(ad: banner,),
              )

Answer 2

Google Maps now supports hybrid composition as. of google_maps_flutter: ^2.1.0 ,

from the docs, https://pub.dev/packages/google_maps_flutter to enable Hybrid composition use

if (defaultTargetPlatform == TargetPlatform.android) {
  AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
}