Show drawing controls on Google Map

I am working on Google Map. I am trying to show either Circle or Polygon using same code. I can see Drawing controls when I am showing Polygon but I can't see Drawing Controls when I am showing Circle. My code is like below.

@if(empty($zone->radius)) 
            var myLatlng = new google.maps.LatLng({{trim(explode(' ',$zone->center)[1], 'POINT()')}}, {{trim(explode(' ',$zone->center)[0], 'POINT()')}});
        @else
            var myLatlng = new google.maps.LatLng({{ rtrim(ltrim($zone->centers,"("),")") }});
        @endif


        var myOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    


        @if(empty($zone->radius)) 
            const polygonCoords = [
                [ 
                    @foreach($coordinates->coordinates[0] as $coords)
                        { lat: {{$coords->getLat()}}, lng: {{$coords->getLng()}} },
                    @endforeach
                ],
            ];
        @endif


        // Add circle overlay and bind to marker
        var circle = new google.maps.Circle({
            center: new google.maps.LatLng({{ rtrim(ltrim($zone->centers,"("),")") }}),
            radius: {{ $zone->radius }},
            map: map,
            fillColor: "#8e112d",
            strokeColor: "#8e112d",
            fillOpacity: 0.4,
            strokeOpacity: 0.5,
            strokeWeight: 2,
            clickable: true,
        });

    

        map.fitBounds(circle.getBounds());



        polygonCoords.forEach(function(polygonCoords) {
            var zonePolygon = new google.maps.Polygon({
                paths: polygonCoords,
                fillColor: "#8e112d",
                strokeColor: "#8e112d",
                fillOpacity: 0.4,
                strokeOpacity: 0.5,
                strokeWeight: 2,
                clickable: true,
            });

            zonePolygon.setMap(map);

            const bounds = new google.maps.LatLngBounds();
            polygonCoords.forEach(function(latlng) {
                bounds.extend(latlng);
            });

            map.fitBounds(bounds);
        });


        
        drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.CIRCLE,
                ]
            },
            polygonOptions: {
                editable: true
            }
        });
        
        drawingManager.setMap(map);