Making the Bing Map API Map responsive

Question

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));
}

Answer 1

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');

});

Answer 2

I do it with map.SetView:

addEvent(window, 'resize', function() { 
  var width = $(window).width();
  map.setView({ width: width, height: 400 })
});