Add markers at the tapped locations in Flutter Maps?

2 mins read

In Syncfusion® Flutter Maps, you can add markers to the tapped locations by following these steps:

Step 1: Add the syncfusion_flutter_maps packages to your dependencies in the pubspec.yaml file.

Step 2: Wrap SfMaps to the GestureDetector widget to capture the tapped location on the map.

Step 3: Convert the pixel point to latitude and longitude using the MapTileLayerController.pixelToLatlng method.

Step 4: Set the converted latitude and longitude position to the marker position field and insert the marker using the MapTileLayerController.insertMarker method.

late MapLatLng _markerPosition;
late MapZoomPanBehavior _mapZoomPanBehavior;
late MapTileLayerController _controller;
 
@override
void initState() {
  _controller = MapTileLayerController();
  _mapZoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4);
  super.initState();
}
 
void updateMarkerChange(Offset position) {
   // Convert the local point into latlng and insert marker
  // in that position.
  _markerPosition = _controller.pixelToLatLng(position);
  if (_controller.markersCount > 0) {
    _controller.clearMarkers();
  }
  _controller.insertMarker(0);
}
 
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Marker sample')),
    // To obtain the maps local point, we have added a gesture 
    // detector to the map widget.
    body: GestureDetector(
      onTapUp: (TapUpDetails details) {
        updateMarkerChange(details.localPosition);
      },
      child: SfMaps(
        layers: [
          MapTileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            zoomPanBehavior: _mapZoomPanBehavior,
            initialFocalLatLng: MapLatLng(28.0, 77.0),
            controller: _controller,
            markerBuilder: (BuildContext context, int index) {
              return MapMarker(
                latitude: _markerPosition.latitude,
                longitude: _markerPosition.longitude,
                child: Icon(Icons.location_on, color: Colors.red),
              );
            },
          ),
        ],
      ),
    ),
  );
}

Screenshot

Syncfusion maps marker

Check the following links for more features in Syncfusion® Flutter Maps:

Live samples

Blogs about Flutter Maps

Did you find this information helpful?

Yes

Comments (0)

Add markers at the tapped locations in Flutter Maps?

Access denied