[google_maps_flutter] iOS infoWindow is not showing always

[ice1250]

Steps to reproduce

Click on a marker in the Google sample code

Expected results

The InfoWindow should be showing

Actual results

The InfoWindow is not showing. This issue only occurs on iOS. It does not occur on Android.

ios version : 17.5

My yaml code ..

name: flutter_application_1 description: "A new Flutter project." publish_to: 'none'

version: 1.0.0+1

environment: sdk: ^3.5.4

dependencies: flutter: sdk: flutter

cupertino_icons: ^1.0.8 google_maps_flutter: ^2.10.0

dev_dependencies: flutter_test: sdk: flutter

flutter_lints: ^4.0.0

flutter: uses-material-design: true

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

late GoogleMapController mapController;

  final LatLng _center = const LatLng(-33.86, 151.20);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
            title: const Text('Sydney'), backgroundColor: Colors.green[700]),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 14.0,
          ),
          markers: {
             const Marker(
              markerId: MarkerId('Sydney'),
              position: LatLng(-33.86, 151.20),
              infoWindow: InfoWindow(
                title: "Sydney",
                snippet: "Capital of New South Wales",
              ),
            )
          },
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

Launching lib/main.dart on iPhone 15 in debug mode...
Xcode build done.                                            9.1s
Connecting to VM Service at ws://127.0.0.1:56399/ujeJXU6tVYU=/ws
Connected to the VM Service.
Google Maps SDK for iOS version: 8.4.0.0
New version of Google Maps SDK for iOS available: 9.1.1.0
Reloaded 1 of 785 libraries in 188ms (compile: 8 ms, reload: 71 ms, reassemble: 86 ms).

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 14.1.1 23B81 darwin-arm64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.95.3)
[✓] Connected device (5 available)
[✓] Network resources

[darshankawar]

@ice1250 I am able to replicate this on iOS, while on Android it works as expected.

stable : 3.24.5
master : 3.27.0-1.0.pre.628

[siddhinho]

Hi guys, I had the same issue.

[promocare]

Can confirm on iOS simulator and real device.

Forcing on tap mapController.showMarkerInfoWindow(MarkerId(...)); does not work.

mapController.isMarkerInfoWindowShown(markerId) returns true.

Rollback of plugin version does not fix the issue.

[✓] Flutter (Channel stable, 3.24.4, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google
    Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.95.3)
[✓] Connected device (4 available)
[✓] Network resources

[siddhinho]

Guys, i resolve this issue creating my own PopOver. I used this lib https://pub.dev/packages/custom_info_window and make my layout.

[benji-farquhar]

I see no info window at all on google_maps_flutter_ios 2.13.2, whereas on google_maps_flutter_ios 2.13.1 and 2.13.0 I see the info window flash for about 500 milliseconds and then disappear. Since no recent version works, I don't think we can workaround it.

[✓] Flutter (Channel stable, 3.24.5, on macOS 15.1.1 24B91 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
[✓] VS Code (version 1.95.3)
[✓] Connected device (6 available)
[✓] Network resources
• No issues found!

[benji-farquhar]

I tried to debug it yesterday in GoogleMapMarkerController.m and messages.g.m but it's the first time i've tried to debug native code and it was a bit beyond my skillset.

Hoping we can slap a priority on this. I think the issue has been present for quite a lot longer than this ticket and iOS is unusable.

[edex96]

the source of the problem is here at version 2.13.2 https://pub.dev/packages/google_maps_flutter_ios/changelog

to continue your life without waiting for them to fix it, use version 2.13.1

note: do not put "^" before the version number or else it will roll itself to 2.13.2 again :D

dependency_overrides:
  google_maps_flutter_ios: 2.13.1

[benji-farquhar]

2.13.1, 2.13.0 flashes the info window then it disappears for me. Only on iOS so it's not my code.

[edex96]

@BenjiFarquhar make sure you have done this

flutter clean
rm pubspec.lock
rm -rf ./ios/.symlinks
rm -rf ./ios/Pods
rm ./ios/Podfile.lock
flutter pub get
cd ios ; pod repo update ; pod update ; cd ..
flutter run

If you are using vscode in the side panel there is "DEPENDENCIES" vertical tab open transient dependency section and check google_maps_flutter_ios version in its pubspec.yaml it should be "2.13.1"

[benji-farquhar]

Cheers but i've done it, I'm experiencing different behaviour on 2.13.2 and 2.13.1, so the different versions are being run successfully.

[stam0912]

I'm experiencing the same issue. The info window doesn't show up when I tap on the marker. It works on Android but not iOS.

I'm using flutter 3.24.4 google_maps_flutter 2.10.0 google_maps_flutter_ios 2.13.2

[sstadtl]

dependency_overrides:
  google_maps_flutter_ios: 2.13.1

i can confirm. getting infowindow again when using this override

[benji-farquhar]

I've found out that google_maps_flutter_ios: 2.13.1 closes the info window when you update the markers.

I update the markers to display a different bitmap image for the marker (my "selected" marker icon is different). Let me know if there is another way to update a marker icon that doesn't update all the markers, but it works on web and android as it is.

[edex96]

@BenjiFarquhar

here is a code to change the "only" selected marker icon to a different one and if it exists, the previously selected marker icon back to its original form

on the map, there are two pins with the default red image if a marker is tapped the tapped one's icon turns to orange and its info window is shown then if the other one is tapped, the previous marker's icon is changed back to red and its info window is closed the tapped one's icon is changed to orange and its info window is shown

import 'dart:ui';
import 'package:edisapp/controllers/utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Marker> markers = [];
  GoogleMapController? googleMapController;
  Marker? selectedMarker;
  late BitmapDescriptor defaultPin;
  late BitmapDescriptor selectedPin;

  Future<BitmapDescriptor> icon(String fname) async {
    ByteData data = await rootBundle.load(fname);
    Codec codec = await instantiateImageCodec(
      data.buffer.asUint8List(),
      targetWidth: 66,
    );
    FrameInfo fi = await codec.getNextFrame();
    final byteData = await fi.image.toByteData(format: ImageByteFormat.png);
    final bytes = byteData!.buffer.asUint8List();
    return BitmapDescriptor.bytes(bytes);
  }

  getInitialMarkers() async {
    defaultPin = await icon('assets/pin.png');
    selectedPin = await icon('assets/pintest.png'); // orange
    markers = [
      Marker(
        markerId: MarkerId('1'),
        position: LatLng(40.98497470084764, 29.069472563574063),
        icon: defaultPin,
        infoWindow: InfoWindow(title: 'title 1', snippet: 'snippet 1'),
        onTap: () => onTap(MarkerId('2')),
      ),
      Marker(
        markerId: MarkerId('2'),
        position: LatLng(40.83428951050001, 29.481392650987797),
        icon: defaultPin,
        infoWindow: InfoWindow(title: 'title 2', snippet: 'snippet 2'),
        onTap: () => onTap(MarkerId('2')),
      ),
    ];
    refresh();
  }

  onTap(MarkerId markerId) {
    googleMapController?.showMarkerInfoWindow(markerId);
    if (selectedMarker != null) {
      setSelectedToNormal();
    }
    setMarkerSelected(1);
    refresh();
  }

  setMarkerSelected(int index) {
    final marker = markers[index];
    markers[index] = Marker(
      markerId: marker.markerId,
      position: marker.position,
      icon: selectedPin, // only update this
      infoWindow: marker.infoWindow,
      onTap: marker.onTap,
    );
    selectedMarker = markers[index];
  }

  setSelectedToNormal() {
    int index =
        markers.indexWhere((e) => e.markerId == selectedMarker!.markerId);
    logit('setting $index to normal');
    markers[index] = Marker(
      markerId: selectedMarker!.markerId,
      position: selectedMarker!.position,
      icon: defaultPin, // only update this
      infoWindow: selectedMarker!.infoWindow,
      onTap: selectedMarker!.onTap,
    );
  }

  refresh() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  void initState() {
    super.initState();
    getInitialMarkers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GoogleMap(
          markers: {...markers},
          initialCameraPosition: CameraPosition(
            target: LatLng(41.00024866867318, 29.0257125104099),
            zoom: 8.4746,
          ),
          onMapCreated: (con) {
            googleMapController = con;
          },
        ),
      ),
    );
  }
}

[benji-farquhar]

@edex96 Thank you for providing the code example. I tested it, and it indeed demonstrates the bug with google_maps_flutter_ios: 2.13.1. Note that google_maps_flutter_ios: 2.13.2 has different behaviour, where it doesn't display the info window at all, not even for a second like google_maps_flutter_ios: 2.13.1 does. Here's a video showing the issue occurring on google_maps_flutter_ios: 2.13.1 with your implementation. I made minor tweaks to get the code working, so anyone looking to fix the bug can use it for testing by simply updating the image asset paths.

https://github.com/user-attachments/assets/a591a62a-7843-467f-a730-670995efad38

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Marker> markers = [];
  GoogleMapController? googleMapController;
  Marker? selectedMarker;
  late BitmapDescriptor defaultPin;
  late BitmapDescriptor selectedPin;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GoogleMap(
          markers: markers.toSet(),
          initialCameraPosition: const CameraPosition(
            target: LatLng(41.00024866867318, 29.0257125104099),
            zoom: 8.4746,
          ),
          onMapCreated: (controller) {
            googleMapController = controller;
          },
        ),
      ),
    );
  }

  Future<void> getInitialMarkers() async {
    defaultPin = await icon('assets/images/map_markers/marker_grocery_item_unselected.png');
    selectedPin = await icon('assets/images/map_markers/marker_grocery_item_selected.png');

    markers = [
      Marker(
        markerId: const MarkerId('1'),
        position: const LatLng(40.98497470084764, 29.069472563574063),
        icon: defaultPin,
        infoWindow: const InfoWindow(title: 'title 1', snippet: 'snippet 1'),
        onTap: () => onTap(const MarkerId('1')),
      ),
      Marker(
        markerId: const MarkerId('2'),
        position: const LatLng(40.83428951050001, 29.481392650987797),
        icon: defaultPin,
        infoWindow: const InfoWindow(title: 'title 2', snippet: 'snippet 2'),
        onTap: () => onTap(const MarkerId('2')),
      ),
    ];
    refresh();
  }

  Future<BitmapDescriptor> icon(String path) async {
    final ByteData data = await rootBundle.load(path);
    final Codec codec = await instantiateImageCodec(
      data.buffer.asUint8List(),
      targetWidth: 66,
    );
    final FrameInfo frameInfo = await codec.getNextFrame();
    final byteData = await frameInfo.image.toByteData(format: ImageByteFormat.png);
    return BitmapDescriptor.fromBytes(byteData!.buffer.asUint8List());
  }

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((_) {
      getInitialMarkers();
    });
  }

  void onTap(MarkerId markerId) {
    googleMapController?.showMarkerInfoWindow(markerId);

    if (selectedMarker?.markerId == markerId) {
      // Deselect marker if it's already selected
      setSelectedToNormal();
      refresh();
      return;
    }

    setSelectedMarker(markerId);
    refresh();
  }

  void refresh() {
    setState(() {});
  }

  void setSelectedMarker(MarkerId markerId) {
    // Reset previously selected marker if exists
    if (selectedMarker != null) {
      setSelectedToNormal();
    }

    final markerIndex = markers.indexWhere((m) => m.markerId == markerId);
    if (markerIndex != -1) {
      final marker = markers[markerIndex];
      markers[markerIndex] = marker.copyWith(
        iconParam: selectedPin,
      );
      selectedMarker = markers[markerIndex];
    }
  }

  void setSelectedToNormal() {
    if (selectedMarker == null) return;

    final markerIndex = markers.indexWhere((m) => m.markerId == selectedMarker!.markerId);
    if (markerIndex != -1) {
      final marker = markers[markerIndex];
      markers[markerIndex] = marker.copyWith(
        iconParam: defaultPin,
      );
      selectedMarker = null;
    }
  }
}

[edex96]

@BenjiFarquhar I suspect your versions may have something to do with this bug. my versions that do not have the problem as shown in the video:

Flutter 3.27.0 • channel stable
CocoaPods 1.16.2

environment:
    sdk: ^3.6.0

dependencies:
    ...
    google_maps_flutter: ^2.9.0

dependency_overrides:
    google_maps_flutter_ios: 2.13.1

[edex96]

@BenjiFarquhar also I needed to point out this code block is dead (never runs)

    if (selectedMarker?.markerId == markerId) {
      // Deselect marker if it's already selected
      setSelectedToNormal();
      refresh();
      return;
    }

Also here you've moved selectedMarker control inside the setSelectedMarker turns the already simple code block into a complex one.

  void setSelectedMarker(MarkerId markerId) {
    // Reset previously selected marker if exists
    if (selectedMarker != null) {
      setSelectedToNormal();
    }
    ...

[benji-farquhar]

@edex96 Cheers! I managed to get the same versions of everything as you (except environment - I have sdk: '>=3.5.0 <4.0.0' but don't think that would cause the differing behaviour) and i still have the flashing marker issue on iOS only.

[abhlabs]

@BenjiFarquhar I've been following this discussion for a couple of weeks, and have been experiencing the same symptom. Today I tried the suggestion to force google_maps_flutter_ios to 2.13.1 in a different app, and it worked fine. The only difference I see with the app that works is that it had been upgraded to use GoogleMaps pod 9.2.0. The app I had been working with was at 8.4.0. Which version of the pod are you using?

[benji-farquhar]

@abhlabs Thanks. I'm on 8.4.0.

How did you specify the pod version? I keep trying to upgrade the pod and it goes to 8.4.0.

[abhlabs]

How did you specify the pod version? I keep trying to upgrade the pod and it goes to 8.4.0.

In my podfile, this is the relevant section that was changed:

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  pod 'GoogleMaps', '9.2.0'

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

This may be helpful: GoogleMaps CocoaPod documentation. Hope this helps!

[benji-farquhar]

@abhlabs Cheers. I also had to add pod 'Google-Maps-iOS-Utils', '6.1' to the pod file. However I still have the flashing info window issue. Maybe your project that worked wasn't updating the marker icon/redrawing the marker in some way after the markers have been drawn?

[abhlabs]

Maybe your project that worked wasn't updating the marker icon/redrawing the marker in some way after the markers have been drawn?

Possibly, although it worked fine in Android and all previous iOS builds. Just for reference, my podfile calling for ios 15.0, and here's the flutter doctor -v output:

[✓] Flutter (Channel stable, 3.27.1, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/abh/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (2 weeks ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/abh/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/abh/Desktop/LADYBUG.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2024.2)
    • Android Studio at /Users/abh/Desktop/LADYBUG.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

Hopefully something here helps you -- let me know.

[aleslic89]

@BenjiFarquhar I suspect your versions may have something to do with this bug. my versions that do not have the problem as shown in the video:

Flutter 3.27.0 • channel stable
CocoaPods 1.16.2

environment:
    sdk: ^3.6.0

dependencies:
    ...
    google_maps_flutter: ^2.9.0

dependency_overrides:
    google_maps_flutter_ios: 2.13.1

Problem persist for me with the same configuration: I'd try to update google_maps_flutter: ^2.10.0 dependency_overrides: google_maps_flutter_ios: 2.13.2

Nothing change

Any suggest?

[abhlabs]

Problem persist for me with the same configuration: I'd try to update google_maps_flutter: ^2.10.0 dependency_overrides: google_maps_flutter_ios: 2.13.2

What version of the google_maps cocoapod are you running? If you're not on 9.2, give that a try.

[aleslic89]

Problem persist for me with the same configuration: I'd try to update google_maps_flutter: ^2.10.0 dependency_overrides: google_maps_flutter_ios: 2.13.2

What version of the google_maps cocoapod are you running? If you're not on 9.2, give that a try.

I add this on Podfile pod 'Google-Maps-iOS-Utils', '6.1' pod 'GoogleMaps', '9.2.0' and rerun from Xcode instead: no changes

[aleslic89]

Update & Solution: After many combination i solve di problem with this configuration:

Env Flutter 3.27.1 • channel stable CocoaPods 1.16.2

pubspeck.yaml environment: sdk: ^3.6.0

dependencies: ... google_maps_flutter: ^2.9.0

dependency_overrides: google_maps_flutter_ios: 2.13.1 # THIS IS VERY IMPORTANTE TO STRICT THIS VERSION AND NOT WRITE ^

Podfile
pod 'Google-Maps-iOS-Utils', '6.1' pod 'GoogleMaps', '9.2.0'

in my case before this setting InfoWindow does not appear anytime, after this time is stable like before

[spyingcoder]

This should be included in the stable channel of the plugin, why we should do this kind of workaround.

[jlopezrod]

This dependency solved the problem:

dependency_overrides: google_maps_flutter_ios: 2.13.1

[pipe0919]

This dependency solved the problem: dependencies: google_maps_flutter: ^2.10.1 dependency_overrides: google_maps_flutter_ios: 2.13.1