Friday, October 22, 2010

Bing Maps - Setting the size

I have worked with Bing Maps on a few projects now, but had an issue today that took way too long to figure out. I was trying to set the map display size. According to the documentation I should be able to set a div tag to the dimensions I desire and the map will fill the space when it is loaded. I that but I was getting the default (600x400px). Here's the markup I was using:


<div id="map"></div>

div#map
{
position: relative;
width: 100%;
height: 100%;
}


When I examined the markup and style with firebug, I could see Bing Maps was inserting inline styling which caused my styles to not apply due to specificity.

How was it fixed?
After some digging I found this article:
http://msdn.microsoft.com/en-us/library/bb412551.aspx

Which clued me to the fact that I needed to apply a class style and not a element style. Here is the code that fixed it:


<div id="map" class="mapClass"></div>

div#map.mapClass
{
position: relative;
width: 100%;
height: 100%;
}


Thanks Microsoft!