百度地图-同时加载多张地图

1、问题背景
在一个界面，同时展示不同城市地图分布情况
2、实现源码
<!DOCTYPE html>
<html>
   <head>
    <title>同时加载四张地图</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script>
	<style>
		body, html {
			 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
			font-family:"微软雅黑";
		}
		#container1{
			50%;
			height:50%;
			float:left;
			overflow: hidden;
			margin:5;
		}
		#container2{
			50%;
			height:50%;
			float:right;
			overflow: hidden;
			margin:5;
		}
		#container3{
			50%;
			height:50%;
			float:left;
			overflow: hidden;
			margin:5;
		}
		#container4{
			50%;
			height:50%;
			float:right;
			overflow: hidden;
			margin:5;
		}
		#map1{
			margin:0 0 3px;
			height:100%;
		}
		#map2{
			margin:3px 0 0;
			height:100%;
		}
		#map3{
			margin:3px 0 0;
			height:100%;
		}
		#map4{
			margin:3px 0 0;
			height:100%;
		}
	</style>
	
   </head>
<body>
	<div id="container1">
		<div id="map1"></div>
	</div>
	<div id="container2">
		<div id="map2"></div>
	</div>
	<div id="container3">
		<div id="map3"></div>
	</div>
	<div id="container4">
		<div id="map4"></div>
	</div>
</body>
</html>
<script type="text/javascript">
	//加载第一张地图
	var map1 = new BMap.Map("map1");            
    var point1 = new BMap.Point(114.309531, 30.59619);  
    map1.centerAndZoom(point1,15);               
    map1.enableScrollWheelZoom();    
                  
	//加载第二张地图
	var map2 = new BMap.Map("map2");            // 创建Map实例
    var point2 = new BMap.Point(106.554865,29.569238);  
    map2.centerAndZoom(point2,15);                 
    map2.enableScrollWheelZoom();                  //启用滚轮放大缩小
    
    //加载第二张地图
	var map3 = new BMap.Map("map3");            // 创建Map实例
    var point3 = new BMap.Point(118.797717,32.064001);  
    map3.centerAndZoom(point3,15);                 
    map3.enableScrollWheelZoom();
    
     //加载第二张地图
	var map4 = new BMap.Map("map4");            // 创建Map实例
    var point4 = new BMap.Point(121.476788,31.236058);  
    map4.centerAndZoom(point4,15);                 
    map4.enableScrollWheelZoom();
</script>
3、实现结果