flutterdarthere-apiheremaps

Here Maps Tap Listener to show info bubble in Flutter


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


Solution

  • 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