Bing Maps

Logged in as Username

Bing Maps Ajax Control v7 Simple Map

Bing Map with zoom to specific location

To zoom in on a city or a specific neighborhood we provided center and zoom options in the mapOptions. In this example we use the "birdseye" MapTypeId for a bird's eye of Montreal's Habitat 67 residential complex.




code

 <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<style>
	#map-canvas{        
		height: 400,
		width: 600
	}
	pre{
		width:1200px;
	}
	.contentTableWrapper td,
	.contentTableWrapper th{
		border: 1px solid black;
		padding:5px;
	}
	
</style>
<script type="text/javascript">
function createMap()
{
   /* Your map key should go here as well as other map options (see below) */   
   var mapOptions = { 	credentials:"mU8oWDqfsv7mokFDSI9D~z9kt6yiuMwZapLioiwcSsw~AquHdfN08Bh3KC1h3QB11UKcMEuhui6_gK_qExCheA7vJdFR5ZFSyzCV1lwwbV_N",
                        height: 400,
                        width: 600,
                        mapTypeId: Microsoft.Maps.MapTypeId.road,						
						showMapTypeSelector: false,
						center: new Microsoft.Maps.Location(45.51603, -73.67706),                         
                        zoom: 11
                    };

   /* map is placed in div with id = map-canvas */
   var map = new Microsoft.Maps.Map(document.getElementById("map-canvas"), mapOptions );
}
</script>
</head>

<body onload="createMap();">
<h4>Simple Bing Map</h4>
<p>To zoom in on a city we provided center and zoom options in the mapOptions</p>
<div id='map-canvas'></div> 
<div id="mainBody">
<br/><br/>