[google_maps_flutter_web] Map pins don't move

[SittiphanSittisak]

Hi, a pin in Google Maps doesn't move after setState a new location on the web(It move on mobile).

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.0, on Microsoft Windows [Version 10.0.19042.985], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.56.0)
[√] Connected device (3 available)

• No issues found!

---

You can repeat by using this code(Try in mobile and web(I am using firebase host) to see this bug).

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3
  google_maps_flutter: ^2.0.6
  google_maps_flutter_web: ^0.3.0

---

minimal code sample

page1.dart:

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

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  void initState() {
    Timer time = Timer.periodic(Duration(seconds: 3), (Timer t) => timer());
    super.initState();
  }

  LatLng _kMapCenter1 = LatLng(19.0182, 72.8479);
  LatLng _kMapCenter2 = LatLng(19.0183, 72.8480);
  bool toggle = false;

  Future timer() async {
    if (toggle) {
      setState(() {
        _kMapCenter1 = LatLng(19.0181, 72.8478);
        _kMapCenter2 = LatLng(19.0184, 72.8481);
      });
      toggle = !toggle;
    } else {
      setState(() {
        _kMapCenter1 = LatLng(19.0182, 72.8479);
        _kMapCenter2 = LatLng(19.0183, 72.8480);
      });
      toggle = !toggle;
    }

    print(_kMapCenter1.longitude);
  }

  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(19.01825595, 72.84793854),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        markers: Set<Marker>.of(_createMarker()),
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  //ทำ marker
  Set<Marker> _createMarker() {
    print(5555);
    return {
      Marker(
          markerId: MarkerId("marker_1"),
          position: _kMapCenter1,
          infoWindow: InfoWindow(title: 'Marker 1'),
          rotation: 90),
      Marker(
        markerId: MarkerId("marker_2"),
        position: _kMapCenter2,
      ),
    };
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

---

main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_project/page1.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}

---

Thank guy.

[TahaTesser]

Hi @SittiphanSittisak
Thanks for filing the issue, I can reproduce it on the web, works fine on mobile

Reproduced the issue using the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}



class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  void initState() {
    Timer time = Timer.periodic(Duration(seconds: 3), (Timer t) => timer());
    super.initState();
  }

  LatLng _kMapCenter1 = LatLng(19.0182, 72.8479);
  LatLng _kMapCenter2 = LatLng(19.0183, 72.8480);
  bool toggle = false;

  Future timer() async {
    if (toggle) {
      setState(() {
        _kMapCenter1 = LatLng(19.0181, 72.8478);
        _kMapCenter2 = LatLng(19.0184, 72.8481);
      });
      toggle = !toggle;
    } else {
      setState(() {
        _kMapCenter1 = LatLng(19.0182, 72.8479);
        _kMapCenter2 = LatLng(19.0183, 72.8480);
      });
      toggle = !toggle;
    }

    print(_kMapCenter1.longitude);
  }

  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(19.01825595, 72.84793854),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        markers: Set<Marker>.of(_createMarker()),
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  //ทำ marker
  Set<Marker> _createMarker() {
    print(5555);
    return {
      Marker(
          markerId: MarkerId("marker_1"),
          position: _kMapCenter1,
          infoWindow: InfoWindow(title: 'Marker 1'),
          rotation: 90),
      Marker(
        markerId: MarkerId("marker_2"),
        position: _kMapCenter2,
      ),
    };
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.0, on Microsoft Windows [Version 10.0.19043.985], locale en-US)
    • Flutter version 2.2.0 at C:\Users\Taha\Code\flutter_stable
    • Framework revision b22742018b (12 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\openjdk\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 1.8.0-262-b10)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.6)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31313.79
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • 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

[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.22.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64    • Microsoft Windows [Version 10.0.19043.985]
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 90.0.818.66

! Doctor found issues in 1 category.

[SittiphanSittisak]

Thank you for your response and so sorry for any issue.

[jj-hoeksema]

Have you tested his on iOS aswell?
For my app it works on android but not on iOS. Will file a seperate bug if this example does work on iOS
#80007
Might be related

[tl-vt]

I have the same issue with web.
Yet, Is there any solution available for this? any temporary solution will be also appreciated.

To be specific for my scenario:
I am getting the new position for the marker from a websocket, once I received the position, I am moving the camera, updating polyline and adding the new marker for the map and updating the state. I see camera moves to the new position and also the polylines are added but no luck to add a new marker at this new position.