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.


 <script type="text/javascript" src=""></script>
		height: 400,
		width: 600
	.contentTableWrapper td,
	.contentTableWrapper th{
		border: 1px solid black;
<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 );

<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">