-1

Before anyone jumps on me for an answer to my question that already exists, please read the rest of my question and tell me how to handle this.

There is already a question asked (Making the Bing Map API Map responsive) that contains what is marked as an answer except the answer doesn't work.

The problem? In addition to some other issues (Google vs. Bing, a full listing of the javascript implementation, etc.) the answer includes a variable called listingsW that does not exist anywhere in the answer or the question.

Does anyone have a working example (complete) for either Bing or Google?

Thanks in advance!

$(window).resize(function () {
var screenH = $(document).height();
var screenW = $(document).width();
$('#map-canvas').css({
    width: screenW - listingsW,
})
 google.maps.event.trigger(map, 'resize');

});
Community
  • 1
  • 1
user2247569
  • 21
  • 6
  • The solution has been added to [the question](http://stackoverflow.com/questions/18905546/making-the-bing-map-api-map-responsive)... – geocodezip Sep 23 '14 at 02:02

1 Answers1

1

listinsW is the width of some other control on their page. If you had a side panel, that may contain a list of items beside the map you would subtract this the width of that panel from the screen width to get the width of the map. If you have a full screen map then remove this property. All that said you could just simply have the map fill the available space by setting the css propertyies; position:relative;width:100%;height:100%. You will also need to add the following to your CSS styles:

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}

By using CSS you don't need to worry about using events when the window resizes.

rbrundritt
  • 16,570
  • 2
  • 21
  • 46
  • Width:100% and Height:100% might not work with previous version of IE though, it behaves weirdly sometimes. http://stackoverflow.com/questions/16811716/height100-not-working-in-internet-explorer – Nicolas Boonaert Sep 23 '14 at 08:29
  • It works for me on IE7,8,9,10,11. Haven't tested IE6, but V7 is technically not supported on that version of IE. IE6 market share is around 3%. – rbrundritt Sep 23 '14 at 08:35
  • Yes it's working but you can have bad behavior in a fully integrated website where the web designer/integrator messed up the parent elements' css information. Check the link if needed. – Nicolas Boonaert Sep 23 '14 at 08:57