How to disable the scrolling of the Google Maps built into the site on phones?

Question

HTML

There is a Google map on the site, embedded through a standard iframe. How to make the entire page scroll instead of the map on touch devices?

<iframe src="https://www.google.com/maps/embed?..." 
width="100%" height="450" 
frameborder="0" style="border:0" allowfullscreen></iframe>

Answer 1

If you use Api goole, then you need to disable scrolling through options when initializing the map.
If the map created through the constructor is loaded into an iframe, then you cut it out with the mouse action style:

iframe {
pointer-events: none;
}

You hang a click handler on the iframe itself, which changes css when clicked.

$('iframe').click(function(){
 $(this).css('pointer-events','auto');
})