CODEWITHSUNDEEP
javascripthtmlcssbing-maps
Frecklefoot
Frecklefoot

Reputation: 1692

Change CSS in Bing Map elements?

I'm converting an in-house application from using Google Maps to Bing Maps. The map needs to appear inside a named HTML div. Everywhere I've converted them, they render fine, with one exception.

The map is supposed to appear at the bottom of a very long table. Instead, it renders at the top of the page, covering a number of rows. Using the F12 Developer Tools (in IE), we were able to adjust some CSS parameters to get it to render correctly. The problem is, they're inside divs inserted by Bing Maps. Looking at the Microsoft Maps API, there are facilties to change numerous options, but not to alter the Bing-generated CSS.

The pertinent CSS:

<div class="MicrosoftMap MapTypeId_auto large miniscule" style="left: 0px; top: 0px; 
right: 0px; bottom: 0px; overflow: hidden; position: relative; z-index: 0; 
cursor: url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20141118162111.86/cursors/grab.cur), move; 
direction: ltr !important; touch-action: none; background-color: rgb(244, 242, 238);">

If we remove overflow, thus:

<div class="MicrosoftMap MapTypeId_auto large miniscule" style="left: 0px; top: 0px; 
right: 0px; bottom: 0px; position: relative; z-index: 0; 
cursor: url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20141118162111.86/cursors/grab.cur), move; 
direction: ltr !important; touch-action: none; background-color: rgb(244, 242, 238);">

it renders correctly, in the right location. The code to allocate the map:

var newMap = new Microsoft.Maps.Map(
   document.getElementById("mapelement"), {
   credentials: "[my credentials]",
   center: new Microsoft.Maps.Location(37.6970, -97.8096),
   disableBirdseye: true,
   mapTypeId: Microsoft.Maps.MapTypeId.road
});

And the function that gets called to insert the map, LoadMaps(), is called here in the HTML:

<body onload="LoadMaps()">

We're not using jQuery or any other libraries.

My leading theory is that the Bing Map tries to render before the mapelement is loaded, so it just renders at the top. But this wouldn't explain why Google Maps renders into the element fine, and onload is supposed to only be called after the entire page is loaded.

Anyone else have experience with Bing Maps and might know what's going on?

UPDATE: Here is the HTML for the mapelement:

<table class="tableResult" border="0">
    <tr>
        <td class="mapCell"><div id="mapelement" style="width: 900px; height: 900px"></div></td>
    </tr>
</table><table border="0">
    <tr>
        <td colspan="29"><p style="page-break-before: always"></td>
    </tr>
</table>
    </div>

I know it's weird having hte div close outside the table when it starts inside the table, but that's not the problem (and it's kind of a pain to change since it's an aspx page).

Upvotes: 0

Views: 1273

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

You need to specify a position value for the map. In the style parameter add position:relative;

Upvotes: 1

Related Questions