Flutter/Dart Add custom Tap Events for Google Maps Marker

user_10318099 0
Viewed 26333

How would I add a custom handler for tap events for Google Maps Marker (google_maps_flutter)? I can only see consumeTapEvents which doesn't actually take in any functions but only bool. I've thought of using GestureDetector but doesn't seem quite right.

What is the standard way of handling events on Google Map's Markers? I'm trying to navigate to a new page upon click.

Thanks

dart flutter google-maps
6 Answers

With the release of version ^0.3.0+1 a new Marker API was introduced which handles markers as widgets (including an onTap() method). This way a Google Map has a markers: option which admits a list of Marker objects. Each of the elements can be defined like this:

Marker(
  markerId: MarkerId("id"), // a string for marker unique id
  icon: BitmapDescriptor.defaultMarker(), // options for hues and custom imgs
  position: LatLng(lat, long), // lat and long doubles

  onTap: () {
    //this is what you're looking for!
  }

),

Much easier than the former controller approach!

user_26188830

You can use onTap or onLongPress option in the map plugin to monitor tap events. Then you can add the marker in following way on the tapped position

    final Set<Marker> _markers = {};



 GoogleMap(onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 13.0,
        ),
        compassEnabled: true,
        tiltGesturesEnabled: false,
        onTap: (latlang){
          if(_markers.length>=1)
            {
              _markers.clear();
            }

          _onAddMarkerButtonPressed(latlang);
        },
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        mapType: mapType,
        markers: _markers,
        onCameraMove: _onCameraMove,
      ),

where the _onAddMarkerButtonPressed function is 

 void _onAddMarkerButtonPressed(LatLng latlang) {
loadAddress(latlang);
_latLng = latlang;
 setState(() {
  _markers.add(Marker(
    // This marker id can be anything that uniquely identifies each marker.
    markerId: MarkerId(_lastMapPosition.toString()),
    position: latlang,
    infoWindow: InfoWindow(
      title: address,
    //  snippet: '5 Star Rating',
    ),
    icon: BitmapDescriptor.defaultMarker,
  ));
});
}
user_91329300

Keep in mind that the current release is a developer preview at version 0.0.3. Give it a bit of time to get things working, please!

user_224830 
     void _onMapCreated(GoogleMapController controller){
    this._controller = controller;
    controller.onMarkerTapped.add(_onMarkerTapped);
}

void _onMarkerTapped(Marker marker) {
...
}

Widget build(BuildContext context) {
 ... GoogleMap(
        onMapCreated: _onMapCreated,
        options: GoogleMapOptions(
          ...
        ));
}
user_103093980

Make custom object when you creating markers. 

var map = <String, String> {}; // custom object

for (int i = 0; i < mCrag.length; i++) {
    controller.addMarker(new MarkerOptions(
       icon: BitmapDescriptor.fromAsset('assets/images/down-arrow.png'),
       position: LatLng(double.parse(mCrag[i].lat), double.parse(mCrag[i].lon)),
    )).then((marker) {
         map[marker.id] = mCrag[i].id; // this will return when tap on marker
         return marker;
    });
}

// marker click event
void onMarkerTapped(Marker marker) {
   var selectedMarker = map[marker.id];  // here you will get your id.
   debugPrint(selectedMarker);
   getRoutes(selectedMarker);
}
user_58958300

You can do something like 

_mapController.onMarkerTapped.add((marker) {
      // your code here
    });

Where _mapController is an instance of GoogleMapController :)

user_60048820
Related