[Plugin: Comprehensive Google Map Plugin] indefinite width and height of the page on iPad

Hi Jana,

I visited your website, looks nice! I saw you have found a solution for your problem. How did you solve it? Did you use an other plugin?

Hi Tim,

I’m experiencing the same thing described by Jana on a site I’m working on, and can also confirm that Jana’s site is still experiencing the issue that she describes in her post. If you visit her site’s contact page with Chrome on Android, you can scroll indefinately to the left and down, way past the page content. I have the same issue on my site at:

https://neighboragency.com/dev/connect/

Placing the map on this page causes it to be scrollable infinitely to the left and downward. Removing the map from the page makes the problem go away. The plugin works fine in FF on the desktop, so maybe it’s an issue with mobile browsers, as she reports the issue on the iPad (but not iPhone?). Let me know if I can provide you with any further information about this issue, I’d like to help you (and her, and me) get this resolved.

Hi Tim,

I did not find any solution for this problem. I think I will just remove this plugin and find a different solution….
Please let me know if YOU find anything that will fix it. It’s a great plugin it’s just not working good on mobile devices:(.

Jana ??

Hi Wenda and Jana,

I will try to find an other solution/plugin which will work. I’m also thinking of removing the plugin. Keep you posted!

Best,
Timo

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;<strong>top:100000px !important;</strong>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.

Pieces of code on this site helped me a lot:
https://www.coolestguyplanettech.com/extend-the-twenty-eleven-theme-menu-navigation-to-fullscreen/

I have added this code in my CSS (Child’s Theme Twenty Eleven WP 3.4.1:

/* =Responsive Structure for ipad
———————————————– */

body {
padding: 0 0;}

#page {
max-width: 1000px;}

#branding, #main, #footerMenu ul, #access ul {
width: 1000px;
margin: 0 auto;
}

Further on I changed the meta viewport tag in the header.php from:
<meta name=”viewport” content=”width=device-width” />
to:
<meta name=”viewport” content=”width=1000″ />

Works like a charm. Comprehensive Google Map Plugin has been aligned properly. The only thing is that the round navigation button in the left corner doesn’t work on Ipad. I have decided to embed a code generatad on Google Maps in my right sidebar. The text bubble can be quite annoying but can easily be removed with these instructions: https://stackoverflow.com/questions/8728296/google-maps-wordpress-remove-speech-bubble

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.