Google Maps iFrame vs API

[thoughton]

The method in the Kanso manual for inserting a full-width Google Map involves creating a new page, and inserting Google’s embed (iframe) code. The iFrame code defaults to 600 wide and 450 high, but Kanso does something so it displays as 450 high and 100% width.

This looks great on desktop, but on an iPhone this causes a serious problem. If I scroll down to the map on my site, the 450px high map often takes up the entire viewport. If this happens I CANNOT SCROLL AWAY, since all swipes are interpreted by Google Maps as zoomin/zoomout.

I’ve done some research and it seems not possible to disable GMaps swiping when using the iframe embed. It is only possible using the Gmaps v3 API.

What would be the recommended way of implementing the v3 API in a Kanso one-page site? I want it to appear exactly the same as it does now with the iframe method, but I need to disable Gmaps swipe=zoom thing.

[thoughton]

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>

• This reply was modified 9 years, 10 months ago by thoughton.
• This reply was modified 9 years, 10 months ago by thoughton.
• This reply was modified 9 years, 10 months ago by thoughton.
• This reply was modified 9 years, 10 months ago by thoughton.

[satori]

Hey Thoughton,

thank you for providing a solution to the issue!

Google Maps JavaScript API v3, which has a feature for disabling the scrolling of the map, hasn’t yet been integrated into Kanso (experimentally, is it part of the customized Visual Content Builder plugin I’ve integrated into the latest theme, Shogun, still testing though).

Inserting the API by hand would probably be the cleanest and most controllable solution, here’s the manual on how to do it (although I suspect you’ve seen it for sure). There are essentially two three steps to it: obtaining the API key from Google, inserting the necessary JavaScript (can go into the “header-functions.php” theme file), and inserting a HTML placeholder for the map (can go directly into the content of the page, or into a template file, if needed repeatedly as a php snippet).

A third-party WP plugin with ready code is another solution, which might be easier to implement yet slightly more challenging to customize or backward-engineer.

Should you need additional help with the maps API, please let me know!

P.S. you can use the “

" tag for posting code here, it will be pre-formatted ;)

Sincerely,
Andrii / Satori Studio

[Author]

Posts