0

I have the following HTML:

<head>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script> 
    <script type="text/javascript" src="~/Scripts/IndexView.js"></script>    
</head>
<body onload="LoadMap();">
    <div class="row">
        <div>
            <h2>Where do you want to go?</h2>
        </div>
    </div>

    <div class="row">        
        <div id="pnlMap">
        </div>
    </div>

    <div class="row">
        <div style="align-content:center">
            <h3>Test</h3>            
        </div>
    </div>
</body>

And IndexView.js:

function LoadMap() {
    var map = new VEMap('pnlMap');
    map.LoadMap();
}

What I end up with is a page where the map starts at the very top left of the web page. What I want is for the map to appear beneath the text Where do you want to go?.

As I understand the way that bootstrap "rows" work, they should appear sequentially on the page and, if I replace the map with text, that is exactly what happens; so, is there something about Bing Maps that breaks this rule. Looking here what I'm doing appears to be correct.

3
  • I can't see bootstrap library loaded...
    – Himanshu
    Mar 5, 2017 at 10:28
  • Bootstrap is loaded by a bundle in the _Layout.cshtml. I left it out because it just crowded the question. Mar 5, 2017 at 10:32
  • Looks like you are using Bing Maps V6.3 which is deprecated as of last November and will be turned off soon. You should migrate your app to Bing Maps V8 which has a lot more features and is much faster.
    – rbrundritt
    Mar 6, 2017 at 16:55

1 Answer 1

0

I was able to get the desired layout after adding style="position:relative; width:400px;" to the div containing the map.

function LoadMap() {
  var map = new VEMap('pnlMap');
  map.LoadMap();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

<body onload="LoadMap();">
  <div>
    <div class="row">
      <div>
        <h2>Where do you want to go?</h2>
      </div>
    </div>

    <div class="row">
      <div id="pnlMap" style="position:relative; width:400px; height:400px;">
      </div>
    </div>

    <div class="row">
      <div style="align-content:center">
        <h3>Test</h3>
      </div>
    </div>
  </div>
</body>

or better you can also give width in percentage as width:50%

2
  • Many thanks - adding position relative works great. Why? Surely whatever the default / bootstrap setting for this would apply to text - so why, when I replace a map with text, don't I get the text behaving the same way? Mar 5, 2017 at 11:11
  • it seems by default if we don't provide any positioning it takes it as 'static '.
    – Himanshu
    Mar 5, 2017 at 11:22

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.