Google map on tap marker action with Supabase

create a custom datatype for the custom map.

create an AppState of our new datatype

create a custom map.

here is the code:


import 'package:google_maps_flutter/google_maps_flutter.dart' as gmap;

class CustomMap extends StatefulWidget {
  const CustomMap(
      {Key? key,
      this.width,
      this.height,
      this.center,
      this.cuLocation,
      this.showShop})
      : super(key: key);

  final double? width;
  final double? height;
  final LatLng? center;
  final List<CustomMapLocationStruct>? cuLocation;
  final Future<dynamic> Function()? showShop;

  @override
  _CustomMapState createState() => _CustomMapState();
}

class _CustomMapState extends State<CustomMap> {
  late CustomMapLocationStruct locationPlaceHolder;

  @override
  void initState() {
    super.initState();
    locationPlaceHolder =
        CustomMapLocationStruct(id: 0, latitude: 0.0, longitude: 0.0);
  }

  Set<gmap.Marker> _createMarkers() {
    return widget.cuLocation!.map((location) {
      return gmap.Marker(
        markerId: gmap.MarkerId(location.id.toString()),
        icon: gmap.BitmapDescriptor.defaultMarker,
        position: gmap.LatLng(location.latitude, location.longitude),
        onTap: () {
          // Add your code here to handle the tap event
          // print('Marker with id ${location.id} tapped');
          locationPlaceHolder = CustomMapLocationStruct(
              id: location.id,
              latitude: location.latitude,
              longitude: location.longitude);
          FFAppState().shopHolder = locationPlaceHolder;
          widget.showShop!();
        },
      );
    }).toSet();
  }

  @override
  Widget build(BuildContext context) {
    return gmap.GoogleMap(
      initialCameraPosition: gmap.CameraPosition(
          target:
              gmap.LatLng(widget.center!.latitude, widget.center!.longitude),
          zoom: 14),
      myLocationButtonEnabled: true,
      myLocationEnabled: true, // This line is added
      zoomControlsEnabled: false,
      markers: _createMarkers(),
    );
  }
}

this is where our action when we click on the marker:

onTap: () {
          // Add your code here to handle the tap event
          // print('Marker with id ${location.id} tapped');
          locationPlaceHolder = CustomMapLocationStruct(
              id: location.id,
              latitude: location.latitude,
              longitude: location.longitude);
          FFAppState().shopHolder = locationPlaceHolder;
          widget.showShop!();
        },

we create locationPlaceHolder and init it when the page load

  late CustomMapLocationStruct locationPlaceHolder;

  @override
  void initState() {
    super.initState();
    locationPlaceHolder =
        CustomMapLocationStruct(id: 0, latitude: 0.0, longitude: 0.0);
  }

when click on the marker we will set our locationPlaceHolder to CustomMapLocation datatype that we click on

          locationPlaceHolder = CustomMapLocationStruct(
              id: location.id,
              latitude: location.latitude,
              longitude: location.longitude);

after that, we set our locatonPlaceHolder to our AppState shopHolder

          FFAppState().shopHolder = locationPlaceHolder;

the last line of the code widget.showShop!(); is the call-back action we use to show the bottom sheet of the company when click on the marker.

Create a Component for show our company

the Component has a parameter name locationPara type CustomMapLocation (don't forget to unselect the required button of the parameter so that the parameter can be null). we use ID inside CustomMapLocation to single query one company from the Supabase to show our user.

5. when using the map
in the call-back action create an action to show the button sheet to call our Component and pass our AppState shopHolder to it:

That is it Hope this helps.