CODEWITHSUNDEEP
htmlajaxbing-maps
jcvegan
jcvegan

Reputation: 3170

bing map control doesn't respect div

From this page http://www.bingmapsportal.com/isdk/ajaxv7#CreateMap1 I was able to create a map. This is the html code:

<div class="fluid-row" style="height:300px;">
<div class="span12">
    <div id="prdmap" class="map">
    </div>
</div>

And the javascript:

var map = null;
$(document).ready(function(){
    map = new Microsoft.Maps.Map(document.getElementById('prdmap'), {
        credentials: 'api_key',
        enableSearchLogo: false,
        enableClickableLogo: false
    });
    map.setView({mapTypeId : Microsoft.Maps.MapTypeId.road});
});

But when the map loads it takes all the screen, not the height and with of its container. Is this possible to take the height and width of the container div?

Upvotes: 2

Views: 3241

Answers (3)

sujithayur
sujithayur

Reputation: 386

You have to specify the height and width while creating the map.

  map = new Microsoft.Maps.Map(document.getElementById('prdmap'), {
    credentials: 'api_key',
    enableSearchLogo: false,
    enableClickableLogo: false,
    width:500,
    height:500
});

Upvotes: 0

GeorgesC
GeorgesC

Reputation: 145

Using the position parameter solved my problem.

<div id="prdmap" style="position:absolute; width:400px; height:400px;></div>

Upvotes: 7

Bojin Li
Bojin Li

Reputation: 5799

If you have a width and height specified(or inherited) on the container element, the map will take it. The code you posted show nothing about the actual width and height of prdmap. There could be CSS styles regarding width and height defined for the id prdmap, the class map, or for a <div> under class span12 etc... you get the idea. Examine your html source to see why the map is talking up the whole screen. Also try defining an explicit width and height inline if possible:

        <div id='prdmap' style="width:500px; height:500px">
        </div>

Upvotes: 0

Related Questions