Fix google map marker in center
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;
}
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".