CODEWITHSUNDEEP
google-mapsflutter
Bilal Rabbi
Bilal Rabbi

Reputation: 1840

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.

Upvotes: 9

Views: 10456

Answers (3)

Suat Özkaya
Suat Özkaya

Reputation: 755

You can also use CameraUpdate class with animateCamera method, such as:

  void zoomIn() async {
    final controller = await _controller.future;
    final zoom = await controller.getZoomLevel();
    controller.animateCamera(CameraUpdate.zoomTo(zoom + 1));
  }

  void zoomOut() async {
    final controller = await _controller.future;
    final zoom = await controller.getZoomLevel();
    controller.animateCamera(CameraUpdate.zoomTo(zoom - 1));
  }

Upvotes: 0

ayoub kouadir
ayoub kouadir

Reputation: 71

Try putting padding option in GoogleMap() widget

GoogleMap(
               initialCameraPosition: CameraPosition(
               target: _locationCoords, zoom: 12.0),
               markers: Set.from(allMarkers),
               onMapCreated: mapCreated,
               zoomControlsEnabled: true,
               zoomGesturesEnabled: true,
               scrollGesturesEnabled: true,
               compassEnabled: true,
               padding: EdgeInsets.only(
                 bottom:MediaQuery.of(context).size.height*0.25),
         )

padding:EdgeInsets.only(bottom:MediaQuery.of(context).size.height*0.25),

Upvotes: 7

Bilal Rabbi
Bilal Rabbi

Reputation: 1840

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,
                        ),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );

Upvotes: 10

Related Questions