On my flutter googleMap i have quickDialButton, which has multiple buttons. One of them is supposed to center the camera of the parent mapWidget which happens via the googleMapControllet that i am passing as a parameter.
return Scaffold(
body: GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(42, 23), zoom: 11.5),
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
mapToolbarEnabled: false,
onMapCreated: (controller) {
googleMapController = controller;
},
markers: customMarkers.toSet(),
),
floatingActionButton: MyQuickDialButton(
c: googleMapController,
latitude: userLocation.latitude,
longitude: userLocation.longitude,
),
The problem is that the googleMapController gets initialized after the floatingActionButton property to the scaffold. How can i update it after i have the controller initialized.
Instead of passing this controller, i created new function that can run controller methods from the parent widget.
void _centerCamera() {
googleMapController.animateCamera(CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(userLocation.latitude, userLocation.longitude),
zoom: 16)));
}
...
floatingActionButton: MyQuickDialButton(
c: _centerCamera,
latitude: userLocation.latitude,
longitude: userLocation.longitude,
)
and later i am calling just the function "c" from the child widget
Related
I am using Google maps in my flutter application and needed to integrate Huawei maps too. So every code related to the maps now is duplicated like:
Map<MarkerId, Marker> googleMarkers = <MarkerId, Marker>{};
Map<huawei.MarkerId, huawei.Marker> huaweiMarkers = <huawei.MarkerId, huawei.Marker>{};
void _onHuaweiMapCreated(huawei.HuaweiMapController controller) =>
_huaweiMapController = controller;
void _onGoogleMapCreated(GoogleMapController controller) => _googleMapController = controller;
GooglePlayServicesHelper.googlePlayServicesAvailable
? GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(30.0, 40.0),
zoom: 11.0,
),
onMapCreated: _onGoogleMapCreated,
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
markers: Set<Marker>.of(googleMarkers.values),
)
: huawei.HuaweiMap(
initialCameraPosition: huawei.CameraPosition(
target: huawei.LatLng(30.0, 40.0),
zoom: 11.0,
),
onMapCreated: _onHuaweiMapCreated,
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
markers: Set<huawei.Marker>.of(huaweiMarkers.values),
),
and so on...
My question is if there is any way I can use generic or abstract classes (interface concept) instead of all these conditions and duplicated code? Especially if I wanted to integrate another type of maps in the future in order to achieve open-closed principle.
I am trying to make draggable circle in google maps in flutter but i don't know how to do that?
How can i do it in flutter?
I have the circle on google map
widget but i can't drag it
Set<Circle> circles = Set.from([Circle(
circleId: CircleId(id),
center: LatLng(latitude, longitude),
radius: 4000,
)]);
GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
myLocationButtonEnabled: true,
initialCameraPosition: initialMapLocation,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
onCameraMove: null,
circles: circles,
);
please look at this Question and answer . for Drag and Resize a View
https://stackoverflow.com/a/63954279/6813907
I have an app that implements GoogleMap.
I can go back to the page and get a nice map with premade settings, but I cannot make the map refresh when i press the button and nothing is set beforehand .
The widget is created on Build() and I have a button that gets the lat and lng from geolocator and also cityname reverse lookup.
That calls
SaveGPS() when it is done with everything.
I normally go directly from the Prefs.lat Prefs.lng, but I tried creating member variables _lng and _lat including a _zoom variable so that setState will work.. it does not work. Not sure what I'm doing wrong.
Container(
width: 350,
height: 350,
child: GoogleMap(
markers: Set<Marker>.of(_markers),
mapType: MapType.satellite,
initialCameraPosition:
CameraPosition(zoom: _zoom, target: LatLng(_lat, _lng))),
),
void saveGps() async {
DateTime now = DateTime.now();
var timezoneOffset = now.timeZoneOffset;
Prefs.cityName = _cityName;
Prefs.offset = timezoneOffset.inMinutes / 60;
setState(() {
_lat = Prefs.lat = _position.latitude;
_lng = Prefs.lng = _position.longitude;
_markers.clear();
_markers.add(Marker(
markerId: MarkerId(Prefs.cityName),
position: LatLng(Prefs.lat, Prefs.lng),
infoWindow: InfoWindow(
title: Prefs.cityName,
)));
_zoom = 17;
});
}
I used a map controller and did an animateCamera call. This was the only way to make it work. Other items update with setState but not this one.
// create this in your class
Completer<GoogleMapController> _controller = Completer();
// build method here..
Container(
width: 350,
height: 350,
child: GoogleMap(
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
markers: Set<Marker>.of(_markers),
mapType: MapType.satellite,
initialCameraPosition: CameraPosition(
zoom: 16, target: LatLng(Prefs.lat, Prefs.lng))),
),
When you want to save the new map or display it,
call this code here:
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(
CameraPosition(zoom: 17, target: LatLng(Prefs.lat, Prefs.lng))));
I am using the google_maps_flutter package and the Zoom level for the myLocationButton, when pressed, is set to my last zoom level. I would like to reset the Zoom level when the myLocationButton is pressed.
This is the code for the Google Maps;
GoogleMap(
padding: EdgeInsets.only(bottom: _mapBottomPadding),
mapType: MapType.normal,
initialCameraPosition: _baseLocation,
myLocationButtonEnabled: true,
myLocationEnabled: true,
zoomControlsEnabled: true,
zoomGesturesEnabled: true,
// minMaxZoomPreference: const MinMaxZoomPreference(12, 14),
polylines: _polylineSet,
markers: _markersSet,
onMapCreated: (GoogleMapController controller) async {
if (!_controller.isCompleted) {
//first calling is false
//call "completer()"
_controller.complete(controller);
// setState(() {});
} else {
//other calling, later is true,
//don't call again completer()
}
// _controller.complete(controller);
_googleMapController = controller;
// Set Initial Camera Position
setCameraPosition(
position: locationData.getCurrentAddress.position
as Position);
setMapBounds();
setState(() {});
},
),
The zoom is stuck on the last zoom level when setting camera position previously and I would like to rest it when I click the myLocationButton.
The setMapBounds(); method call sets the zoom which depends on map bounds and calls the code below which can result in a high zoom level and the zoom level persists after the call, when I click the myLocationButton.
_googleMapController!
.animateCamera(CameraUpdate.newLatLngBounds(latLngBounds, 70));
How can I reset the zoom level after animating the camera?
Can you please try this one if it helps.try to setState zoomValue
double zoomValue=14.0;
LatLng mapCenter = new LatLng("your latitude", "your longitude");
initialCameraPosition: CameraPosition(
target: mapCenter,
zoom: zoomValue,
),
Try this
GoogleMap(
zoomGesturesEnabled: true,
tiltGesturesEnabled: false,
onCameraMove:(CameraPosition cameraPosition){
print(cameraPosition.zoom);
},
I have a compass plugin that is giving direction angle, and also location plugin that provide the current location. With these plugins, I use google maps placed under Streambuilder to put my current location as marker and with a line to another location.
The issue I am facing currently is how to rotate the map automatically when the device is rotated, as the first plugin provides direction angle (double value) that gets updated streams as the device rotate.
I wanted to use this angle value to update Google Maps bearing automatically, so that the map rotates accordingly.
I have tired many ways but of no use. Google maps does not respond.
this is my code:
Completer<GoogleMapController> _controller = Completer();
return StreamBuilder(
stream: FlutterQiblah.qiblahStream,
builder: (_, AsyncSnapshot<QiblahDirection> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) return LoadingIndicator();
final qiblahDirection = snapshot.data;
_goToTheLake(qiblahDirection);
return GoogleMap(
mapType: MapType.satellite,
zoomGesturesEnabled: true,
compassEnabled: true,
myLocationEnabled: false,
myLocationButtonEnabled: true,
rotateGesturesEnabled: true,
initialCameraPosition: CameraPosition(
target: position,
zoom: 18,
// bearing: qiblahDirection.direction,
),
markers: Set<Marker>.of(
<Marker>[
widget.meccaMarker,
Marker(
draggable: true,
markerId: MarkerId('Marker'),
position: position,
icon: BitmapDescriptor.defaultMarker,
rotation: qiblahDirection.qiblah,
onTap: () {
_goToTheLake(qiblahDirection);
},
onDragEnd: (LatLng value) {
position = value;
_positionStream.sink.add(value);
},
zIndex: 5,
),
],
),
circles: Set<Circle>.of([
Circle(
circleId: CircleId("Circle"),
radius: 10,
center: position,
fillColor: Theme.of(context).primaryColorLight.withAlpha(100),
strokeWidth: 1,
strokeColor: Theme.of(context).primaryColorDark.withAlpha(100),
zIndex: 3,
)
]),
polylines: Set<Polyline>.of([
Polyline(
polylineId: PolylineId("Line"),
points: [position, QiblahMaps.LatLong],
color: Theme.of(context).primaryColor,
width: 5,
zIndex: 4,
)
]),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
},
)
I have placed this function as future called from inside stream builder in order to change the "bearing" of the map:
final GoogleMapController controller = await _controller.future;
controller.moveCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
bearing: qiblahDirection.direction,
),
),
);
} ```
Try this plugin flutter_compass
use the events to update google map bearing as you wish