Map in 'Bing.Maps' not shown in the 'Responsive' version


when migrating from the 'TheThemeMachine' (TTM) to 'TheThemeMachineResponsive'(TTMR) the map in the module 'Bing.Maps' is NOT shown anymore.

The frame of the Bing map is ok; however, it seems that there are some transparancy issues!

I tried this with a freshly downloaded 181. When going forth and back with the TTM / TTMR the map shows on TTM but NOT on TTMR (repeatable!).

It looks like the Site.css (TTMR) is overriding 'mapcontrol.css'.

Thanks for your time and help


edikaufmann wrote Jul 7, 2014 at 6:28 AM

some further test have shown that the 'Responsive Theme Machine' V2.1 from Sergey Ermakovich does NOT have this issue!
However, I would like to stay with the TTMR theme!?
thanks again for a solution, ed

edikaufmann wrote Aug 20, 2014 at 8:18 AM

after spending some more time I think the following might help:
  • so far I ONLY tested with the bing.maps Widget
  • I now created a ContentType (CT) including the bing.maps Part
  • When using the CT: on the 'user' screen I still do NOT see the map, HOWEVER,
    on the 'Manage Content' screen (admin dashboard) the map is shown correctly.
  • what am I doing wrong ?!
  • is there a new/other bing.maps Key necessary when using TTMR ?
    I'm out of ideas, any help/hint is appreciated

edikaufmann wrote Dec 9, 2014 at 4:15 PM

After some more digging I found:
Bing.maps generates besides a lot of other <div>s the following:
<div class="MSVE_Map" style="left: 0px; top: 0px; z-index: 1;">
In the meantime I figured when 'un-clicking' (DOM explorer F12) in the MVSE_Map class "position: absolute"
I can see the map!

This class is in 'mapcontrols.css'; I have no idea how I could override this!?
More bizarre: when using TTM: it works with 'position: absolute!'

I'm definitely out of ideas
thanks for any hints, ed

jtkech wrote Dec 10, 2014 at 4:18 AM

In this theme, in site.css there is this line
  img, object, embed, video { max-width: 100%; _width: 100%; height: auto; } /* Fluid images */
Anywhere after, add this line
  .widget-bing-map-widget img { max-width: none; }
Another thing, for a responsive theme you may want to specify a width in percentage in place of a fix width in pixel
To do that, copy the BingMap.cshtml in YourTheme/Views/Parts/

  <div id="BingMap@(mapIndex)" style="position:relative; width:@(Model.Width)px; height:@(Model.Height)px;"></div>
  <div id="BingMap@(mapIndex)" style="position:relative; width:@Model.Width; height:@Model.Height;"></div>
Now, at least you have to specify an unity in your settings, e.g width = 80% and hight = 150px


edikaufmann wrote Dec 10, 2014 at 4:58 PM

hi jtkech,
thank you so much ... upfront: all is working again using your advise!
I can appreciate your solution, HOWEVER, don't you think that a final solution should be part of the
official 'TheThemeMachine Responsive' Theme package!?
In that context thanks for reporting it also here!

Hope somebody will somewhen take it up
again thanks for your time, ed

edikaufmann wrote Dec 11, 2014 at 6:21 AM

PS: as far as the BingMap.cshtml is concerned: I prefer to stick with the original version to control the size!, ed