How to Set Min/Max Zoom Level on Google Map in Flutter

In this example, you will know how to pre-set minimum and maximum zoom levels on Google Maps so that users can't zoom more than the maximum zoom level or less than the minimum zoom level on Flutter App. See the example below:

GoogleMap( 
    zoomGesturesEnabled: true, //enable Zoom in, out on map
    minMaxZoomPreference: MinMaxZoomPreference(10, 15),
)

Here, 10 is the minimum zoom level and 15 is the maximum zoom level.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  LatLng loc1 = LatLng(27.6602292, 85.308027);  

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Disable/Enable Zoom Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  minMaxZoomPreference: MinMaxZoomPreference(10, 15),
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: loc1, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
              },
          )
       );
  }
}

In this way, you can set minimum and maximum zoom levels on Google Map in Flutter.

No any Comments on this Article


Please Wait...