Fix google map marker in center

Question

In my flutter app. I am using google_maps_plugin . The link is https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter . I want to fix the m

Answer 1

I recommend to you to try this new Flutter package https://pub.dev/packages/flutter_animarker

Answer 2

It is possible using stack. The code is shown below.

Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
),
InfoView()                  
 ],)

The InfoView is

class InfoView extends State<AppPage> {
    const InfoView({
        Key key,
        })  : super(key: key);

   @override
    Widget build(BuildContext context) {
    return new Align(
            alignment: Alignment.center,
            child: new Icon(Icons.person_pin_circle, size: 40.0),

        );
    }
}

Then the _onMapCreated is

void _onMapCreated(GoogleMapController controller) {
        setState(() {
        mapController = controller;
            mapController.animateCamera(CameraUpdate.newCameraPosition(
                    CameraPosition(
                    bearing: 270.0,
                    target: LatLng(lattitude, longitude),
                    tilt: 30.0,
                    zoom: 17.0,
                    ),
                ));
        });
    }
    }

This stack class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Answer 3

Actually with new update of google_maps_flutter: ^0.4.0 we can achieve above requirement easily.

This is the demo link.

Map<MarkerId, Marker> _markers = <MarkerId, Marker>{};
int _markerIdCounter = 0;
Completer<GoogleMapController> _mapController = Completer();

Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: GoogleMap(
      markers: Set<Marker>.of(_markers.values),
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: Constants.LOCATION_SRI_LANKA,
        zoom: 12.0,
      ),
      myLocationEnabled: true,
      onCameraMove: (CameraPosition position) {
        if(_markers.length > 0) {
          MarkerId markerId = MarkerId(_markerIdVal());
          Marker marker = _markers[markerId];
          Marker updatedMarker = marker.copyWith(
            positionParam: position.target,
          );

          setState(() {
            _markers[markerId] = updatedMarker;
          });
        }
      },
    ),
  )

void _onMapCreated(GoogleMapController controller) async {
  _mapController.complete(controller);
  if ([INITIAL_LOCATION] != null) {
    MarkerId markerId = MarkerId(_markerIdVal());
    LatLng position = [INITIAL_LOCATION];
    Marker marker = Marker(
      markerId: markerId,
      position: position,
      draggable: false,
    );
    setState(() {
      _markers[markerId] = marker;
    });

    Future.delayed(Duration(seconds: 1), () async {
      GoogleMapController controller = await _mapController.future;
      controller.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: position,
            zoom: 17.0,
          ),
        ),
      );
    });
  }
}

String _markerIdVal({bool increment = false}) {
  String val = 'marker_id_$_markerIdCounter';
  if (increment) _markerIdCounter++;
  return val;
}

Answer 4

This is based on the @Joe answer but it has more accurated pin position and no other class is required:

double mapWidth = MediaQuery.of(context).size.width;
double mapHeight = MediaQuery.of(context).size.height - 215;
double iconSize = 40.0;

return new Stack(
    alignment: Alignment(0.0, 0.0),
    children: <Widget>[
      new Container(
        width: mapWidth,
        height: mapHeight,
        child: _googleMap
      ),
      new Positioned(
        top: (mapHeight - iconSize)/ 2,
        right: (mapWidth - iconSize)/ 2,
        child: new Icon(Icons.person_pin_circle, size: iconSize),
      )
  ]);

This solution don't require to repaint the entire Screen (no setState call) when user update the position. You won't see that weird marker "movement".

Answer 5

Use Stack and IgnorePointer to ignore touches on your widget

Stack(
  children: <Widget>[
    GoogleMap(
      ....
    ),
    Center(
     child: IgnorePointer(
       child: ...
     )
    )               
  ]
)