Flutter_map: Creating a popup onTap that stays above marker regardless of zoom

[garrrettt]

In #184 and #75, the solution to creating a popup similar to Google Map's Info Window was to create another marker to be used as a popup that becomes visible when the first marker is tapped.

I implemented this advice, but keeping the popup directly above the marker is difficult, especially when the zoom changes. I tried specifying a LatLng for the popup that had a certain offset from the marker, but when the zoom changes, the popup and marker either get squished together or become too far apart.

Do you have any ideas how I might keep the popup directly above the marker, regardless of zoom?

[johnpryan]

Can you post a sample that helps clarify the issue?

[garrrettt]

Yes, here's an example. Notice that because I defined the info window's position as a specific LatLng, it gets further away from the marker when you zoom in and close to the marker when you zoom out.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() => runApp(MaterialApp(home: PopupExample()));

class PopupExample extends StatefulWidget {
  @override
  _PopupExampleState createState() => _PopupExampleState();
}

class _PopupExampleState extends State<PopupExample> {
  bool infoWindowVisible = false;
  LatLng markerCoords = LatLng(35.754584, -83.974536);
  double infoWindowOffset = 0.002;
  LatLng infoWindowCoords;

  @override
  void initState() {
    super.initState();

    infoWindowCoords = LatLng(
      markerCoords.latitude + infoWindowOffset,
      markerCoords.longitude,
    );
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: markerCoords,
        zoom: 16.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate:
              'https://api.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}',
          additionalOptions: {
            'accessToken':
                'pk.eyJ1IjoiMTlzbWl0Z3IiLCJhIjoiY2p3anAxYnBhMHVhcTQ5bXhqOXczMTF4NSJ9.BpUH44ClryfRjH7ivHuL5Q',
            'id': 'mapbox.streets',
          },
        ),
        MarkerLayerOptions(
          markers: [
            if (infoWindowVisible)
              Marker(
                width: 200.0,
                height: 200.0,
                point: infoWindowCoords,
                builder: (BuildContext ctx) {
                  return Container(color: Colors.orange);
                },
              ),
            Marker(
              point: markerCoords,
              builder: (BuildContext ctx) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      infoWindowVisible = true;
                    });
                  },
                  child: Icon(Icons.location_on, size: 50.0,),
                );
              },
            ),
          ],
        )
      ],
    );
  }
}

Here's an example of Google Map's Info Window: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

[johnpryan]

You should be able to draw a widget above the marker in the Marker's builder method. Please feel free to reopen if that doesn't work.