CODEWITHSUNDEEP
google-mapsdartflutter
Jesse
Jesse

Reputation: 3050

Flutter/Dart Add custom Tap Events for Google Maps Marker

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

Upvotes: 12

Views: 40965

Answers (7)

Shogun
Shogun

Reputation: 7

I use flutter_map package I tried this and it worked with me.

addmarker(LatLng postion, String urlimg, String id) {
  marker.add(Marker(
    point: postion,
    height: 60,
    width: 60,
    builder: (context) {
      return InkWell(
        onTap: () {
          globals.iduserProfile = id;
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const profileuser(),
            )
          );
        },
        child: CachedNetworkImage(
          imageUrl: urlimg,
          imageBuilder: (context, imageProvider) {
            return CircleAvatar(
              radius: 30,
              backgroundColor: Colors.greenAccent,
              child: CircleAvatar(
                radius: 27,
                backgroundImage: imageProvider,
              )
            );
          },
        ),
      );
    },
  ));
  return marker;
}

Upvotes: 0

Sarthak Singhal
Sarthak Singhal

Reputation: 1225

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,
  ));
});
}

Upvotes: 8

Cardo
Cardo

Reputation: 621

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!

Upvotes: 33

Sagar Chavada
Sagar Chavada

Reputation: 5269

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);
}

Upvotes: 0

Ji Jo
Ji Jo

Reputation: 81

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

void _onMarkerTapped(Marker marker) {
...
}

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

Upvotes: 1

Gabriel
Gabriel

Reputation: 614

You can do something like 

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

Where _mapController is an instance of GoogleMapController :)

Upvotes: -1

Randal Schwartz
Randal Schwartz

Reputation: 44220

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!

Upvotes: 1

Related Questions