Virtual Earth with TBH???

BradenBR · #1 (**permalink**) November 27th, 2006, 11:53 PM

I have tried to add a Virtual Earth Map into a new page. I integrated the Virtual Earth JavaScript into the template.Master Head as follows:

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>Custom Residency</title>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"> /* <![CDATA[ */
        function AdjustColumnsHeight()
        {
            // get a reference to the three DIVS that make up the columns
            var centerCol = window.document.getElementById('centercol');
            var leftCol = window.document.getElementById('leftcol');
            var rightCol = window.document.getElementById('rightcol');
            // calculate the max height
            var hCenterCol = centerCol.offsetHeight;
            var hLeftCol = leftCol.offsetHeight;
            var hRightCol = rightCol.offsetHeight;
            var maxHeight = Math.max(hCenterCol, Math.max(hLeftCol, hRightCol));
            // set the height of all 3 DIVS to the max height
            centerCol.style.height = maxHeight + 'px';
            leftCol.style.height = maxHeight + 'px';
            rightCol.style.height = maxHeight + 'px';
            // Show the footer
            window.document.getElementById('footer').style.vis ibility = 'inherit';
        }
        window.onload = function() { AdjustColumnsHeight(); }
    /* ]]> */
    </script>
</head>

Unfortunately, the css causes the interavtive pop up menu on the virtual earth map to move 200px to the right of the pushpin because the template.Master codes <div id="centercol">

The below code out of the css file

#centercol
{
   position: relative;
   margin-left: 200px;
   padding: 0px;
   background-color: white;
}

If I set the margin-left to 0px the virtual earth menu aligns with the pushpin, but I loose the left column altogether.

Can anyone help????

MythicalMe · #2 (**permalink**) November 28th, 2006, 02:22 AM

How about another DIV?

BradenBR · #3 (**permalink**) November 28th, 2006, 07:17 AM

Can you say a little bit more about adding another DIV? I tried inserting another DIV before, after, and replacing the "centercol", but it didn't work. If you put this code into the a Map.aspx file that inherits from a template above, you will see what I mean.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">

<body onload="GetMap();">

         <script>
      var map = null;

      function GetMap()
      {
      {
         map = new VEMap('myMap');
         map.LoadMap();

      }

      var pin = new VEPushpin(1,
          new VELatLong(38.93048,-120.002),
          null,
          'Daves Pub'
        );
       map.AddPushpin(pin);

       }

      </script>
      <div id='myMap' style="position:relative; width:800px; height:550px;"></div>

   </body>

</asp:Content>

MythicalMe · #4 (**permalink**) November 28th, 2006, 01:38 PM

Now I have the full picture. The centerCol style is set relative to the position of container2. This was done to put the centerCol to the right of leftCol. So repositioning the centerCol is not going to work for you.

What's probably happening is that the pop-up menu is relatively positioned on centerCol too, but is being placed behind the right column instead of on top. You might be able to set the z-index of the myMap div moving the menu to the top of the stack.

Need to download code?

Navigation