disable-scroll-google-map.js

<div class="map-iframe-container">
  <h3>First Map</h3>
  <iframe class="map-iframe"
      frameborder="0" style="border:0; width: 100%; height: 100%"
      src="https://www.google.com/maps/embed/v1/place?key=%GOOGLE_API_KEY%&q=%LOCATION%" allowfullscreen>
  </iframe>
</div>

<div class="map-iframe-container">
  <h3>Second Map</h3>
  <iframe class="map-iframe"
      frameborder="0" style="border:0; width: 100%; height: 100%"
      src="https://www.google.com/maps/embed/v1/place?key=%GOOGLE_API_KEY%&q=%LOCATION%" allowfullscreen>
  </iframe>
</div>
<script type="application/javascript">
    (function () {
        var iframes = document.getElementsByClassName('map-iframe');
        var iframeContainers = document.getElementsByClassName('map-iframe-container');

        var scrollOn = function() {
            [].forEach.call(iframes, function(iframe) {
                iframe.style["pointer-events"] = "auto";
            });
        };

        var scrollOff = function() {
            [].forEach.call(iframes, function(iframe) {
                iframe.style["pointer-events"] = "none";
            });
        };

        [].forEach.call(iframeContainers, function(iframeContainer) {
            iframeContainer.addEventListener("mouseup", scrollOff);
            iframeContainer.addEventListener("mousedown", scrollOn);
        });

        [].forEach.call(iframes, function(iframe) {
            iframe.addEventListener("mouseleave", scrollOff);
        });

        scrollOff();
    }());
</script>