I'm trying to add a tap listener to my map markers on my map to show an info-bubble to show details about that location in my Flutter app. I tried to use the Here Maps Map Pin option but I can't seem to combine on-tap gestures with creating a widget pin. I saw that the JavaScript SDK has a function to add info-bubble to map markers. Is there a way to do that in Flutter apart from the Map Pins?
This is a for loop I wrote to go through the list of Map markers on the map to create the Widget pin for each of them :
for (var a = 0; a < _mapMarkerList.length; a++) {
_hereMapController.gestures.tapListener =
TapListener((Point2D touchPoint) {
_hereMapController.viewToGeoCoordinates(touchPoint);
_hereMapController.pinWidget(
_createWidget('Here is my label', Color(0xFFFCAE06)),
_mapMarkerList.elementAt(a).coordinates);
});
}
You should not create a tap listener multiple times for each marker. Instead create only one tap listener. And then pick a marker with _hereMapController.pickMapItems()
. Inside the callback you can create a map view pin.
void _setTapGestureHandler() {
_hereMapController.gestures.tapListener = TapListener((Point2D touchPoint) {
_pickMapMarker(touchPoint);
});
}
void _pickMapMarker(Point2D touchPoint) {
double radiusInPixel = 2;
_hereMapController.pickMapItems(touchPoint, radiusInPixel, (pickMapItemsResult) {
if (pickMapItemsResult == null) {
// Pick operation failed.
return;
}
List<MapMarker> mapMarkerList = pickMapItemsResult.markers;
int listLength = mapMarkerList.length;
if (listLength == 0) {
print("No map markers found.");
return;
}
MapMarker topmostMapMarker = mapMarkerList.first;
// Now create a map view pin based on this marker's coordinates.
});
}
See this example app for more context: https://github.com/heremaps/here-sdk-examples/blob/d07e4af93b2db946a1f97fdc12cfd6f4b0a760fc/examples/latest/navigate/flutter/map_items_app/lib/MapItemsExample.dart#L306