3

I am using Bing Map API v7 and I am trying to make it responsive. My initial idea was the typical

<div id='mapDiv' style="position:relative; width:100%; height:auto;"></div>

The problem is the map disappears completely when I do this. Any ideas on how to make the map scale down correctly if I can't use height:auto; The map works fine when I define a height. I am pretty stumped by this. Not sure what else I can show of my code to try and help but let me know if you need more.

This was the solution I used:

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
var div = $('#mapDiv');
var menu = $('#mapMenu');
var headerHeight = $('#header').outerHeight();
var windowHeight = $(window).height() - $('#header').outerHeight();
div.css('height', (windowHeight));
}
Fogolicious
  • 412
  • 8
  • 22

2 Answers2

2

You need to detect the window height with Javascript and then set the height dynamically on load as well as on resize. This is for Google map but it's the same premise.

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

});
Jason Prescher
  • 73
  • 6
  • I added my solution to the question but yours is the same as what I did so thanks! – Fogolicious Oct 09 '13 at 14:06
  • I used your function but used map.setView function to set the values.It worked great. – srini Jan 30 '16 at 15:58
  • Since $(document).height()--and width--is the size of the HTML document, if you set the map to be a large number and are using some responsive designs, the HTML size doesn't shrink as you shrink the window. So, it seems it is better to use the window size by using $(window).height()--and width--for this. [Here's a great fiddle example showing the document being larger than the window](http://jsfiddle.net/Xme7y/1/) – adprocas Feb 10 '16 at 02:02
0

I do it with map.SetView:

addEvent(window, 'resize', function() { 
  var width = $(window).width();
  map.setView({ width: width, height: 400 })
});
rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
Colek
  • 1