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

Hm… Interesting, weird… I iwll try to resolve it soon

Yes, Chrome and Safari on Mac also render it properly….

Hm… I am having problems to replicate it… I admit, I had it one time only… But other times when trying to load your page have not produce the problem:

https://skitch.com/azagniotov/8qyne/contact-first-filipino-american-united-methodist-church-of-houston

Do you get this EVERY time you load the page in FF11?

Appreciate you looking into this so quickly.

And yes – I get the same issue every time and on various computers.

ampascual, its taking some time for me… I am travelling to US at the moment. Just giving you heads up

No problem – thanks for the heads up and good luck with the move.

I have the same issue, with Chrome, Firefox, Safari on Mac and Safari on iOs.

Here’s the page: https://dev.tamtando.com (click on the last menu bar item “Contatti”)

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 all,
A possible reason for this I have found is that CGMP is loading a js script in the footer, outside of all DIVs (including container DIVs), all on it’s own, NOT contained in any DIV, that perhaps some themes don’t deal well with. It’s a peculiar bit of code, in that it doesn’t even show up in “view page source” of a successfully loaded page.
Here’s the script: <script src="https://maps.gstatic.com/cat_js/intl/en_ALL/mapfiles/api-3/9/8/%7Bmain,panoramio%7D.js"></script>
I THINK it is being loaded by cgmp.framework.min.js. But working with the un-minified version (cgmp.framework.js) I THINK it’s being loaded in line 1060, or there abouts.
I’ve tried a few approaches to test my theory, but so far, no good. I WOULD like to try to figure out how to alter the JS so that this script gets loaded into a DIV, where the syle could be set to overflow:hidden, since I DO think this is some sort of overflow issue. The thing is, I no nothing of JS, so I am really searching in the dark here.
Any ideas, opinions?
Cheers,
Kevin Logan

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 Powerie,
Ya, agree with you RE looking for an alternative, so I am working with the Google API myself. Not hard at all. The google API behaves differently than the plugin, the JS is being inserted in the head, causing no trouble.
So, for me, problem solved.
Cheers,
Kevin Logan

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.

I’ve posted my solution here

I’ve ran into the same problem.
I discovered that the plugin creates an extra object in the footer of the page with inline styles.

This object is created in the cgmp_google_map_init_global_html_object function in head.php

So removing top:100000px !important from the style.css and head.php resolved my problem.

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.

YES, that definitely solves the problem. Many thanks estepix