Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter googlemap zoomcontrol position

I am using google_maps_flutter package to create a map in app. I am using below function

GoogleMap(
                        initialCameraPosition: CameraPosition(
                            target: _locationCoords, zoom: 12.0),
                        markers: Set.from(allMarkers),
                        onMapCreated: mapCreated,
                        zoomControlsEnabled: true,
                        zoomGesturesEnabled: true,
                        scrollGesturesEnabled: true,
                        compassEnabled: true,
                      )

The problem is with zoom controls. I can see zoom controls appearing but i want to change the position of zoomcontrols to appear on the right side. Is it possible to change the position of zoom controls.

like image 471
Bilal Rabbi Avatar asked May 14 '26 13:05

Bilal Rabbi


1 Answers

I didn't find any solution so i created custom zoom controls and using map controller to added them on map.

Positioned(
      top: 100,
      left: 5,
      child: Card(
        elevation: 2,
        child: Container(
          color: Color(0xFFFAFAFA),
          width: 40,
          height: 100,
          child: Column(
            children: <Widget>[
              IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () async {
                    var currentZoomLevel = await _controller.getZoomLevel();

                    currentZoomLevel = currentZoomLevel + 2;
                    _controller.animateCamera(
                      CameraUpdate.newCameraPosition(
                        CameraPosition(
                          target: locationCoords,
                          zoom: currentZoomLevel,
                        ),
                      ),
                    );
                  }),
              SizedBox(height: 2),
              IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () async {
                    var currentZoomLevel = await _controller.getZoomLevel();
                    currentZoomLevel = currentZoomLevel - 2;
                    if (currentZoomLevel < 0) currentZoomLevel = 0;
                    _controller.animateCamera(
                      CameraUpdate.newCameraPosition(
                        CameraPosition(
                          target: locationCoords,
                          zoom: currentZoomLevel,
                        ),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );
like image 161
Bilal Rabbi Avatar answered May 16 '26 03:05

Bilal Rabbi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!