img max-width 100% breaks map displays - gmap, getlocations, openlayers

what do you mean a "gray map", whats your setup - I mean how are you showing the map?

Subscribe!!!
Actually I have the exact same issue, with corolla theme & gmap+location modules configuration ... and just posted the same (and more detailed) issue here (Corolla theme issues): http://drupal.org/node/1298450,
with some image attachment.

To go further to the yet given details, it seems to me a problem on gmap rendering, probably related with zooming level ... (may be too in). Don't know.
Somewhere I read that gmap module works on css class (drupal standard), and may be adaptive change them too much. Or might this be due to the inc/template.helpers.inc file settings?
I am testing this on Mac Os X browsers (on local web server) ...
Would this missworking probaly extend to other browsers and supports (windows, ipad, iphone, ecc.)?

Thanks for any help!

I am wondering if it has anything to do with this bug, which is fixed in the dev version: #1292710: Misuse of semicolons in meta viewport

Could you try with with fix: edit html.tpl.php in the base theme and replace the meta viewport tag with this:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hi Jeff - thanks for your 473 commits to this awesome theme!!

I'm having the same problem described above in FF - the entire map area is completely gray as shown in the FF screenshot that @itamair posted here: http://drupal.org/node/1298450
I am *also* experiencing messed-up map info windows as shows in this screenshot that was posted to this issue: http://drupal.org/node/1290808

This problem occurs w/only AdaptiveTheme enabled, also w/Sky enabled. I tried the viewport fix (and also installed the 7.x-2.x-dev version of AT), same problem.

But the GOOD NEWS is I was able to track it down to a specific piece of CSS (line 30-34 in css/at.base.css):

/* Enable responsive images */
img {
  max-width: 100%;
}

When I commented that out, my gmaps were suddenly beautiful - both in FF and Chrome! As a side-effect, I had to apply that style my logo: div#branding div#logo img { max-width: 100%; }

I'm not attaching a patch because I'm hoping you'll have some ideas about the implications of just removing this CSS (breaks images for all mobile devices perhaps?). But for someone who's currently stuck, this is an easy temporary fix. Note that if you're using a subtheme, you will probably have to edit the CSS there too. I'm using Sky, and I had to remove the same CSS from the sky/css/html-elements.css file.

@nmcclain - wow, you just saved me a tonne of time! I'm going to work on this today as I really want to get a new version of these sub-themes out as each of them as a bunch of small fixes like this, its been quite a challenge building 3 new themes at once and getting these bugs out relies heavily on bug reports and posts such as yours, very helpful indeed.

This is the fix I am likely to go with, I just need to check a few things first, the selector may change but the CSS is what we'll use:

/* Override max-width 100% for Gmaps */
.gmap img {
  max-width: none;
}

Amazing !!! It works with the Gmap module now ...
But I tested Adaptive with the nice Getlocation Module too (http://drupal.org/project/getlocations), that is fixed with the same technique.

So the overall fix for both Gmap and Getlocations modules seems to be:

/* Override max-width 100% for Gmaps & Getlocations*/
.gmap img, #getlocations_map_canvas img {
max-width: none;
}

... as for me it works on oth modules.

Just to let you know I posted an issue regarding some other renderings prolems with the Getlocations module, here: http://drupal.org/node/1298892

But may be all that is not related to the adaptive theme, and mainly to the Getlocations module itself ...

@ itamair do you have this online somewhere I could look at it?

Hi jeff,
for instance you can have a look to this page: http://inuedizionicommerce.italomairo.com/node/234

Keep in mind that is a site in heavy development, with some memory allocation problems from the server.

I still cannot fire the infowindow open event on the marker.
It's a Getlocation map and there is this issue open on it: http://drupal.org/node/1298892

Don't know if this depends on adaptive or not. Seems to behave the same also with the garland theme ...

tx!

I can't see the infowidow in the markup, I haven't used google maps for a long time but when I last did you could locate the popup infowindow in the markup and actually style it etc, I can't see it, so maybe that is the issue?

mmmhhh ... should be. So, means the getlocation mantainer should/would/will fix this ;-)

For now I will mark this as fixed, I have added the fix from #7 to the base theme, and to each of our styled subthemes. Pixture Reloaded has already been updated, and the other will come later today (new releases).

This is also an issue for openlayers

.openlayers-map img {
max-width: none;
}

seems to do the trick.

Thanks for the great work.

OK, will add to the theme, thanks a lot for the report.

OK, I pushed the fix to GIT (7.x-2.x), and updated our known issues page: http://adaptivethemes.com/documentation/known-issues

The complex fix committed is:

/* Override max-width 100% for map displays */
.gmap img,
.view-gmap img,
.openlayers-map img,
#getlocations_map_canvas img {
  max-width: none;
}

Hi, Jeff

It would be nice if you also add 'YMaps' class for Yandex maps,

.YMaps img {
  max-width: none;
}

Mine breaks in omega html5.

/* Override max-width 100% for Gmaps */
.gmap img {
  max-width: none;
}

Thanks guys!

it also is in Zen theme.
css/normalize.css

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */

  /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */

  /* Responsive images */
  /* @todo Add responsive embedded video. */
  max-width: 100%;  //should change to max-width: none;
  height: auto;
}

but I'm not sure will it works for responsive theme.

@ JeffBurnz

Thanks for the snippet! this saved me.. much appreciated.

I am seeing similar things with jquery mobile theme. Has anyone else seen any issues with jquery mobile?