Alright, I’ve come up with a work-around for this.
I solved the zoomin/zoomout problem by using the CP Google Maps plugin instead of the iframe embed method. However this doesn’t solve the problem on an iPhone when the map fills the screen – any swipes pan the map instead of scroll the page.
To fix that I had to leave the height in CP Google Maps blank, and then use this CSS in my kanso-child style.css file:
.cpm-map {height: 450px;}
@media only screen and (max-width: 767px) {
.cpm-map {height: 250px;}
}
All this does is make the map only 250px high on small mobile devices, so it doesn’t take up the whole viewport.
Edit: my word, there is a lot of spacing when using <code>
