Bing Maps Menu Bug: Position: Absolute/Relative?

Question

We have a strange problem with the new Bing Maps. When positioning the map in a div further down on the page, the popup menu (mouse over "birds-eye view") popups up much further down on the page.

Any ideas how we can fix this code to make it work:

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script>
        $(document).ready(function(){
            //console.debug('Map', ($("#map"))[0]);
            var location = new Microsoft.Maps.Location(-8.59838423, 115.33570617,  0),
                map = new Microsoft.Maps.Map(($("#map"))[0], {
                    credentials: '<removed credentials>',
                    disableUserInput: false,
                    showCopyright: false,
                    showDashboard: true,
                    showLogo: false,
                    showScalebar: false,
                    mapTypeId:Microsoft.Maps.MapTypeId.birdseye
                }
            );


            map.setView({
                animate: false,
                center: location,
                zoom: 12
            });

            //map.entities.push(Microsoft.Maps.Pushpin(location));


          });


      </script>
   </head>
    <body>

        <div style="position: relative;">
            <div style="width:200px; height: 1000px; background: #eee; position: relative;">Some long content</div>
            <div style="position: relative;">
                <div id="map" style="width: 600px; height: 300px; "></div>
            </div>
            <div style="width:200px; height: 1000px; background: #eee;">Some long content</div>
     </div>

    </body>
</html>

Did you manage to solve this problem? I have the exact same scenario. Another problem I have (which I think stems from the same root), is that the MouseEventArgs.getY() returned on the dblclick event is completely wrong (I am adding a pushpin to the map on double click, and the pushpin is not added at the location I click). This also causes skewed zooming when using the mouse wheel to zoom. If anyone has a solution to this, it would be greatly appreciated! — OGG
Microsoft says this issue is fixed but for my page its not fixed at all. They now make the page jump to the top and then place the menu. However its still not placed in the right position. See this thread for more info: social.msdn.microsoft.com/Forums/eu/vemapcontroldev/thread/… — Matt Wolfe

Alastair Aitchison Alastair Aitchison · Accepted Answer · 2011-01-25T08:51:15

You need to add a DOCTYPE declaration to the top of your document, before the opening tag, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Described here: http://msdn.microsoft.com/en-us/library/gg427624.aspx

(As a side note, I also suggest that you edit your question to remove the "credentials" line - this is your own personal application key that you should try to protect)

Bing Maps Menu Bug: Position: Absolute/Relative?

2 Answers