WordPress.org

Ready to get started?Download WordPress

Forums

Comprehensive Google Map Plugin
Huge scrollable space below and to the right of page (19 posts)

  1. ampascual
    Member
    Posted 2 years ago #

    On the page where I'm including the map shortcode, there's a huge amount of empty space appearing below the footer and to the right of the page. For whatever reason, this only happens when the page is rendered with Firefox (currently on v11). IE9 and Safari on both an iPad and PC both load the page just fine. Please see on the link below:

    http://ffaumc.com/contact/

    FYI, I have isolated the issue to the Comprehensive Google Map plugin, as disabling it removes the problem. Anyone have an idea of what might be causing this?

    http://wordpress.org/extend/plugins/comprehensive-google-map-plugin/

  2. alexanderzagniotov
    Member
    Plugin Author

    Posted 2 years ago #

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

  3. alexanderzagniotov
    Member
    Plugin Author

    Posted 2 years ago #

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

  4. alexanderzagniotov
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  5. ampascual
    Member
    Posted 2 years ago #

    Appreciate you looking into this so quickly.

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

  6. alexanderzagniotov
    Member
    Plugin Author

    Posted 2 years ago #

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

  7. ampascual
    Member
    Posted 2 years ago #

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

  8. Misamee
    Member
    Posted 2 years ago #

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

    Here's the page: http://dev.tamtando.com (click on the last menu bar item "Contatti")

  9. klogan2
    Member
    Posted 2 years ago #

    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

  10. klogan2
    Member
    Posted 2 years ago #

    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="http://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

  11. powerie
    Member
    Posted 2 years ago #

    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.

  12. klogan2
    Member
    Posted 2 years ago #

    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

  13. estepix
    Member
    Posted 1 year ago #

    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.

  14. kvermeersch
    Member
    Posted 1 year ago #

    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.

  15. mktatwp
    Member
    Posted 1 year ago #

    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.

  16. klogan2
    Member
    Posted 1 year ago #

    YES, that definitely solves the problem. Many thanks estepix

  17. akedv
    Member
    Posted 1 year ago #

    having the same problem with it at http://www.gesundheitszentrum-althietzing.at/map_test/

    the theme is one from elegantthemes, if this is important...

    greetings
    alexander

  18. estepix
    Member
    Posted 1 year ago #

    you're welcome klogan2, glad to be of help!

  19. Zencowboy
    Member
    Posted 1 year ago #

    removing top:100000px !important worked for me too! Thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic