How to Enable scroll wheel zooming on a map on click ?

<iframe class="map" width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=Status201%20Web%20Development&amp;key=AIzaSyCCGx7iveK21dme8OuLgX9Je7TUDDCw3_A" class=""></iframe>

iframe {





width: 100%;
display: block;
pointer-events: none;
position: relative;





}

iframe.clicked {
pointer-events: auto;
}
           

   <script>

       $('.map-container').click(function(){

       $(this).find('iframe').addClass('clicked')}).mouseleave(function(){

       $(this).find('iframe').removeClass('clicked')});

   </script>