[Plugin: Comprehensive Google Map Plugin] Huge scrollable space below and to the right of page

I’m having the same problem as well, with web-bit browers, for sure. It seems to be an overflow issue, I am betting the map itself (I think we only see a small portion of it, more is hidden) and/or the directions.
I have solved the overflow to the right (I THINK), at least with 2 browsers on mobile android platform, by using overflow-x: hidden in the body CSS. However, I still get the Y overflow, which on a touch-screen device is actually a pretty big issue,,, 1 swipe on the map UP (expected behavior, since the map is moved by touch swiping), and the page is off like a rocket to the moon, or at least the ISS.
I have tried putting overflow: hidden is EVERY div, individually (instead of in the body) and it doesn’t work. FYI, if you put overflow: hidden in the body, you won’t get the scrolling in either direction, but you also can’t scroll to see the directions.
Any ideas? Somewhere else to look? JS, CSS? I am what I consider an advanced amateur at this stuff, but I am totally stumped on this one.
Oh, one last thought, that I know isn’t the cause of my experience/problem, but I did figure out a way to get the height of the map to fill the height of the screen, device dependant. My goal is to get the map to open on the page (mobile phones), <i>just</i> about full screen. By using JS, getting the screen height variable, passing that to the URL, and then getting the variable using PHP, I can “echo” the value of the variable in the HTML for the height, i.e. ($height-0)px. I added the -0 so I can tweak the height – or + if need be,, in fact I am, allowing for a div up top that has the page menu in it. here’s the page if you want to try (themidwaybb.com/wp-content/map_mobile3.php), at a few different window heights,, oh the width is set in % of course, so that is responsive as well.
All the best,
Kevin

Hi klogan2,

I have the latest version of the plugin and I can’t see this being called anywhere in this JS file.

I am seeing it on all pages where I have the plugin, however I am only seeing it in Firefox.

Any update from alexanderzagniotov the last post was 3 months ago. Would be better looking for an alternative plugin?

Thanks,
Powerie.

Hi, I think this problem is a duplicate or very similar to this one.

I left this comment there in case it is of any help.

Hi everyone, in case you are still having problems with this, I have spent many hours debugging this and finally the fix is a little hack to the plugin css:
comprehensive-google-map-plugin/style.css

You need to delete the top:100000px !important; part from line 87
object.cgmp-data-placeholder{background-color:transparent !important;border:none !important;height:0 !important;left:10000000px !important;line-height:0 !important;margin:0 !important;outline:medium none !important;padding:0 !important;position:absolute !important;top:100000px !important;width:0 !important;z-index:9999786 !important}

This will make the page resize correctly. I’m not a CSS expert so probably there’s a better solution without hacking the plugin, but it works for me for now.

Also I have to say that this problem happened when using Responsive theme v1.7.2 along with Comprehensive Google Map Plugin v7.0.29. There is a conflict between these two elements, specifically between the plugin CSS line shown above and the fitVids javascript function located in theme file responsive/js/responsive-scripts.js. This function handles resizing of video inserted via <object>, <iframe> and <embed> elements when the page is resized or when using mobiles and tablets. However the function processes all object elements even google maps’, the problem here is that google maps object does not have a defined height and width (in fact the object is hidden) which causes the function to “crash” when doing operations such as:
aspectRatio = height / $this.width();

When processing a google maps object the result is:
aspectRatio = 0 / 0 = NaN

So even though removing top:100000px fixes the huge height/width problem, it would be great if the theme was modified to distinguish between video <object> and Google Maps <object> in order to treat them differently. And ideally either the theme or the plugin should be able to resize the actual <div> for the displayed Google Map.

Anyway I think this is a brilliant plugin and the responsive theme is also great and it’s really a pity that people stopped using it because of this “huge” problem which can be fixed by just changing a line. I’ll write to the plugin and theme authors to see if I can help them in anyway to get this fixed.

Same issue here…

I discovered that there is a div with the class “fluid-width-video-wrapper” added dynamicly to the content area of my site. When I remove it using firebug the spaces disappear.
In case you don’t need that class to display videos you can give it a display: none and everything is fine. Otherwise maybe that is not the appropriate solution for you.