The Zen 7.x-5.0 responsive theme is great! Thanks, but...

Gmap renders incorrect (see attached image) when using Zen 7.x-5.0. When I switch to Bartik 7.14 all works fine. This appears in latest version browsers IE, FF, Chrome.

The Gmap user interface for zoom and streetview is rendered incorrectly.

The Gmap is produces with module locationmap 7.x-2.1.

CommentFileSizeAuthor
Knipsel.PNG108.89 KBecvandenberg

Comments

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Category: bug » support
Status: Active » Closed (cannot reproduce)

There's not enough information on any level to diagnose this.

ecvandenberg’s picture

ecvandenberg commented
Status: Closed (cannot reproduce) » Needs review

Hi John,

I thought I did provide all relevant information. But I'm not the expert here, so...can you tell me what you need?

Erwin.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Needs review » Postponed (maintainer needs more info)

Please read http://drupal.org/node/73179#issue-details

Thanks!

jtwalters’s picture

jtwalters commented
Status: Needs review » Postponed (maintainer needs more info)

The reason google maps renders incorrectly is because Zen has CSS for responsive images:

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%;
  height: auto;
}

You need to undo this for the google maps container.

e.g.

#mapCanvas img {
  max-width: none;
}
ecvandenberg’s picture

ecvandenberg commented
Status: Postponed (maintainer needs more info) » Needs review

Thanks jtwalters for your #4 advice. But Gmap is build up out of many divs. I did give the #locationmap_map container the CSS property you suggest, but that did not help.

To JohnAlbin who requests more information at #3 I made a fresh and clean Drupal install so you can see it for yourself.

Please check out http://in5w.nl/temp/

Site configuration:
- Drupal core 7.14
- Location Map 7.x-2.1
- Zen 7.x-5.1

You see the Gmap user interface for zoom and streetview is rendered incorrectly.

You can create an account for yourself and change the theme to Bartik. Then the Gmap is rendered correctly.

I thought I did comply to http://drupal.org/node/73179#issue-details, but I'm happy to be advised which relevant details are missing.

jtwalters’s picture

jtwalters commented
Status: Postponed (maintainer needs more info) » Needs review

[edit] I think the correct value is "none" and not "auto" :) see http://stackoverflow.com/questions/9141249/twitter-bootstrap-css-affecti... 

#mapCanvas img {
  max-width: none;
}
ecvandenberg’s picture

ecvandenberg commented

I can't see how to embed #6. The Location map module is generating the map in a way I don't understand. When I check the css code for the map in Firebug all those hidden divs don't make sense to me.

But anyway...a fresh install of Drupal, the contributed module Location map and the Zen responsive theme don't work well together.

I have also created an issue for location map (See http://drupal.org/node/1590140).

jtwalters’s picture

jtwalters commented

It's easy. Just add this to your CSS (in your case you are using a different div id):

#locationmap_map img {
  max-width: none;
}
ecvandenberg’s picture

ecvandenberg commented

Yep, #8 works!

Don't know why it did not work yesterday. I must have made a mistake. Thanks jtwalters!

The fact remains that this is a work around which should not be necessary. But which one is causing this (and should solve this)? Zen or location map?

rupertj’s picture

rupertj commented
Status: Needs review » Closed (works as designed)

I think this is locationmap's issue (I'm one of its maintainers). Ideally, I'd like to see Google include this CSS, but in the interests of things just working, I'd accept a patch to locationmap that includes it.

skyredwang’s picture

skyredwang
Location Shanghai
commented
Project: Zen » GMap Module
Version: 7.x-5.0 » 7.x-2.x-dev
Component: Miscellaneous » Code
Category: support » bug

Yes, Gmap needs to prevent this happening. Patch needed.

skyredwang’s picture

skyredwang
Location Shanghai
commented
Status: Closed (works as designed) » Active

Yes, Gmap needs to prevent this happening. Patch needed.

jerenus’s picture

jerenus commented
Status: Active » Closed (fixed)

This problem has been solved in Gmap.http://drupal.org/node/1297980