create maker with InfoWindow flutter map

Question

along with greeting you, I wanted to ask you if someone has been able to show an InfoWindow in the flutter map maker, or create a container that is floating so that it appears next to the maker, in google map if possible.

new Marker
                    (
                      width: 45.0,
                      height: 45.0,
                      point: new LatLng(-25.963678, -51.240657),
                      builder: (ctx) =>

                      new Container  //here infoWindow or Float Container
                      (
                        //child: new FlutterLogo(),
                          child: IconButton
                          (
                            icon: Icon(Icons.location_on),
                            color: Colors.blue,
                            iconSize: 45.0,
                            tooltip: "prueba",
                            onPressed: ()
                            {
                              print("test press");
                            },
                          )
                      ),
                    ),

Thank you very much for the help as always.

What maps plugin are you using? – Nelson Jr. Sep 09 '20 at 23:56 — Nelson Jr., Sep 09 '20 at 23:56

score 0 · Answer 1 · answered Nov 04 '20 at 07:12

You cannot set a widget as the marker info-window in any of the flutter map plugins. You can only set the title and text of the info-window in the google maps plugins.

You could turn the map info-window off, center the map on the marker if the user clicks on it, and add some code to show a custom dialog at the approximate center of the screen. You would have to use the flutter Stack widget.

Stack(
  children:[
    Map(
      markers: [Marker(/*no info-window*/, onTap: (){
        setState((){ _opacity = 1; });
      })],
      onMapMove: (){
        setState((){ _opacity = 0; });
      }
    ),
    Opacity(
      opacity: _opacity,
      child: /*custom info-window*/,
    ),
  ],
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
),

Abhishek Kumar · Answer 2 · 2021-01-19T14:27:10.670

Use custom_info_window package as follows:

Step 1: Initialise CustomInfoWindowController.

CustomInfoWindowController _customInfoWindowController = CustomInfoWindowController();

Step 2: Call CustomInfoWindowController's addInfoWindow from marker's onTap function.

Marker(
    markerId: MarkerId("marker_id"),
    position: _latLng,
    onTap: () {
      _customInfoWindowController.addInfoWindow(
        <YOUR CUSTOM WIDGET>,
        _latLng,
      );
    },
  )

Step 3: Use GoogleMap Widget with Stack.

Stack(
    children: <Widget>[
      GoogleMap(
        onTap: (position) {
          _customInfoWindowController.hideInfoWindow();
        },
        onCameraMove: (position) {
          _customInfoWindowController.onCameraMove();
        },
        onMapCreated: (GoogleMapController controller) async {
          _customInfoWindowController.googleMapController = controller;
        },
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _latLng,
          zoom: _zoom,
        ),
      ),
      CustomInfoWindow(
        controller: _customInfoWindowController,
        height: 75,
        width: 150,
        offset: 50,
      ),
    ],
  )

Call _customInfoWindowController.hideInfoWindow(); inside GoogleMap's onTap to hide CustomInfoWindow when clicking on map but not on the marker.

Call _customInfoWindowController.onCameraMove(); to maintain CustomInfoWindow's position relative to marker. [IMPORTANT]

Assign _customInfoWindowController.googleMapController = controller; inside onMapCreated. [IMPORTANT]

Add CustomInfoWindow as next child to float this on top GoogleMap.

create maker with InfoWindow flutter map

2 Answers2

Linked