New to Bing Maps.
I need to have several divs on the page and the map in only one of them. The documentation says that the map will take on the size of the div, that does not seem to be the case as the map takes up the whole page and does not respect the size of the div.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/knockout-2.2.1.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="scripts/JBingMaps.js"></script>
<title></title>
</head>
<body>
<div id='mapDiv'"></div>
<div id='navDiv'>
Test right nav
</div>
</body>
</html>
$(function () {
var JBingKey = "{key}";
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
credentials: JBingKey,
center: new Microsoft.Maps.Location(33.5, -112.45),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 10
});
});
body {
}
#mapDiv {
float: left;
border: thin solid #000000;
margin: 0px;
height: 500px;
width: 1000px;
}
#navDiv {
border-style: solid solid solid none;
border-width: thin thin thin 0px;
border-color: #000000;
float: left;
margin: 0px;
width: 187px;
height: 500px;
}
