jayzeng/gist:877027

## gistfile1.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init();">


<div id="myMap" style="position: relative; width: 600px; height: 450px;"></div>

<script type="text/javascript">

function setView(map, options){
   console.log(options);
   if (options.locations){
      var locations = options.locations;
      var l = locations.length;
      if (l > 1){
         var maxLat = -85;
         var minLat = 85;
         var maxLon = -180;
         var minLon = 180;

         for (var i = 0; i < l; i++){
            var loc = locations[i];
            maxLat = Math.max(loc.latitude, maxLat);
            minLat = Math.min(loc.latitude, minLat);
            maxLon = Math.max(loc.longitude, maxLon);
            minLon = Math.min(loc.longitude, minLon);
         }

         options.center = new Microsoft.Maps.Location(
            (maxLat + minLat) / 2,
            (maxLon + minLon) / 2
         );

         var zoom1 = 0;
         var zoom2 = 0;
         if ((maxLon != minLon) && (maxLat != minLat)){
            zoom1 = Math.log(360 / 256 * map.getWidth() / (maxLon - minLon)) / Math.log(2);
            zoom2 = Math.log(180 / 256 * map.getHeight() / (maxLat - minLat)) / Math.log(2);
         }
         options.zoom = Math.floor(Math.min(zoom1, zoom2));
      } else if (l == 1){
         options.center = options.locations[0];
      }
   }
   map.setView(options);
};

var map = null;

function init(){
   // Load the map
   map = new Microsoft.Maps.Map(
      document.getElementById("myMap"),
      {
         credentials: "AvNHx-9klxnBOIe2Wr_nywZ04F2G8X_l3m-x-Boe9_Pe57wReRh8aHbL9P6bNZfw",
         mapTypeId: Microsoft.Maps.MapTypeId.road
      }
   );

   // Some sample pins
   var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-10, 0), {text: '1'});
   var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 10), {text: '2'});
   var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(10, 0), {text: '3'});
   var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(20, -20), {text: '4'});
   var pin5 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(41.88491248124176, 12.52016107413556), {text: '5'});
   var pin6 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(28.287097376655083, 106.12336178706825), {text: '6'});
   var pin7 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(64.76575850827713,-102.83675660646524), {text: '7'});
   var pin8 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-21.604945446832062, 146.4870525903023), {text: '8'});

   map.entities.push(pin1);
   map.entities.push(pin2);
   map.entities.push(pin3);
   map.entities.push(pin4);
   map.entities.push(pin5);
   map.entities.push(pin6);
   map.entities.push(pin7);
   map.entities.push(pin8);

   // Set the view given an array of Location objects
   setView(
      map, //reference ot the Microsoft.Maps.map
      {
         locations: [
            pin1.getLocation(),
            pin2.getLocation(),
            pin3.getLocation(),
            pin4.getLocation(),
            pin5.getLocation(),
            pin6.getLocation(),
            pin7.getLocation(),
            pin8.getLocation()
         ],

         // and any ViewOptions parameter, e.g. "animate"
         animate: true,
         padding: 50
      }
   );

}
</script>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body onload="init();">


	<div id="myMap" style="position: relative; width: 600px; height: 450px;"></div>

	<script type="text/javascript">

	function setView(map, options){
	console.log(options);
	if (options.locations){
	var locations = options.locations;
	var l = locations.length;
	if (l > 1){
	var maxLat = -85;
	var minLat = 85;
	var maxLon = -180;
	var minLon = 180;

	for (var i = 0; i < l; i++){
	var loc = locations[i];
	maxLat = Math.max(loc.latitude, maxLat);
	minLat = Math.min(loc.latitude, minLat);
	maxLon = Math.max(loc.longitude, maxLon);
	minLon = Math.min(loc.longitude, minLon);
	}

	options.center = new Microsoft.Maps.Location(
	(maxLat + minLat) / 2,
	(maxLon + minLon) / 2
	);

	var zoom1 = 0;
	var zoom2 = 0;
	if ((maxLon != minLon) && (maxLat != minLat)){
	zoom1 = Math.log(360 / 256 * map.getWidth() / (maxLon - minLon)) / Math.log(2);
	zoom2 = Math.log(180 / 256 * map.getHeight() / (maxLat - minLat)) / Math.log(2);
	}
	options.zoom = Math.floor(Math.min(zoom1, zoom2));
	} else if (l == 1){
	options.center = options.locations[0];
	}
	}
	map.setView(options);
	};

	var map = null;

	function init(){
	// Load the map
	map = new Microsoft.Maps.Map(
	document.getElementById("myMap"),
	{
	credentials: "AvNHx-9klxnBOIe2Wr_nywZ04F2G8X_l3m-x-Boe9_Pe57wReRh8aHbL9P6bNZfw",
	mapTypeId: Microsoft.Maps.MapTypeId.road
	}
	);

	// Some sample pins
	var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-10, 0), {text: '1'});
	var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 10), {text: '2'});
	var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(10, 0), {text: '3'});
	var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(20, -20), {text: '4'});
	var pin5 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(41.88491248124176, 12.52016107413556), {text: '5'});
	var pin6 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(28.287097376655083, 106.12336178706825), {text: '6'});
	var pin7 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(64.76575850827713,-102.83675660646524), {text: '7'});
	var pin8 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-21.604945446832062, 146.4870525903023), {text: '8'});

	map.entities.push(pin1);
	map.entities.push(pin2);
	map.entities.push(pin3);
	map.entities.push(pin4);
	map.entities.push(pin5);
	map.entities.push(pin6);
	map.entities.push(pin7);
	map.entities.push(pin8);

	// Set the view given an array of Location objects
	setView(
	map, //reference ot the Microsoft.Maps.map
	{
	locations: [
	pin1.getLocation(),
	pin2.getLocation(),
	pin3.getLocation(),
	pin4.getLocation(),
	pin5.getLocation(),
	pin6.getLocation(),
	pin7.getLocation(),
	pin8.getLocation()
	],

	// and any ViewOptions parameter, e.g. "animate"
	animate: true,
	padding: 50
	}
	);

	}
	</script>

	</body>
	</html>