a14n / dart-google-maps

A library to use Google Maps JavaScript API v3 from Dart scripts.
Apache License 2.0
130 stars 66 forks source link

Move Camera not working #109

Closed exilonX closed 2 years ago

exilonX commented 2 years ago

My initial goal was to create a marker on the map and move the camera to that marker. I didn't find a way to animate the camera to the marker or something similar, but I found GMap.moveCamera

Tried it like below, but nothing happens, no idea how to actually debug it...

    final mapOptions = MapOptions()
      ..zoom = 11
      ..center = state.mapState.mapCenter ??
          LatLng(44.431976571842604, 26.09025195973818)
      ..mapTypeControl = false
      ..fullscreenControl = false
      ..streetViewControl = false;

    map = GMap(elem, mapOptions);

    final CameraOptions cameraOptions = CameraOptions()
      ..center = position
      ..zoom = 12;

    map.moveCamera(cameraOptions);

Is moveCamera supported?

a14n commented 2 years ago

This feature looks only supported in beta channel for now. Do you use the beta channel?

exilonX commented 2 years ago

No, I'm not using the beta channel!

To switch I just have to add the beta in the script tag?

a14n commented 2 years ago

To switch I just have to add the beta in the script tag?

That's what the documentation is advising ;)

a14n commented 2 years ago

Feel free to close the issue if that works for you.

exilonX commented 2 years ago

Yeah, it works! Thanks a lot!

i won't make another issue, probably it's not the case, but I have another problem with removing markers, actually changing the position of a marker.

class WebMap extends StatefulWidget implements MapWidget {
  const WebMap({Key? key}) : super(key: key);

  @override
  State<WebMap> createState() => WebMapState();
}

class WebMapState extends State<WebMap> {
  GMap? map;
  Marker? originMarker;

  @override
  Widget build(BuildContext context) {
    return ReduxConsumer<AppState>(builder: (BuildContext context,
        Store<AppState> store,
        AppState state,
        Dispatch dispatch,
        Widget? child) {
      return getMap(store.state);
    });
  }

  void setMarker(LatLng position, int type) {
    if (type == 0) {
      // origin marker

        MarkerOptions options = MarkerOptions()
          ..position = position
          ..icon = 'assets/images/markers/a.png'
          ..map = map;
        originMarker = Marker(options);
    }

    final CameraOptions cameraOptions = CameraOptions()
      ..center = position
      ..zoom = 20;

    map?.moveCamera(cameraOptions);
  }

  Widget getMap(AppState state) {
    String htmlId = "7";

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
      final myLatlng = LatLng(44.431976571842604, 26.09025195973818);

      final elem = DivElement()
        ..id = htmlId
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.border = 'none';

      final mapOptions = MapOptions()
        ..zoom = 11
        ..center = state.mapState.mapCenter ??
            LatLng(44.431976571842604, 26.09025195973818)
        ..mapTypeControl = false
        ..fullscreenControl = false
        ..streetViewControl = false;

      map = GMap(elem, mapOptions);

      print("Cand intra aici ");

      return elem;
    });

    Location? location = state.tripState.origin;
    if (location != null && location.geoPosition != null) {
      setMarker(location.geoPosition!.toLatLng(), 0);
    }

    return HtmlElementView(viewType: htmlId);
  }
}

When the origin location changes, a new marker get's added instead of changing the position of the existing one. Probably I'm missing something... Should I remove the marker first? (didn't really find a way of doing it...)

a14n commented 2 years ago

To remove a marker just set its map property to null

exilonX commented 2 years ago

Great! I didn't think that marker.set would actually do something! I could change the position originMarker?.set('position', position); Thank you!