简化谷歌地图JavaScript代码

我正在使用谷歌地图API代码在一个页面上初始化3个谷歌地图

以下是JSFIDLE：

下面的代码工作得很好，但我想知道是否有任何方法可以简化JavaScript，这样我就不会做同样的事情3次了？可能使用for循环来遍历地图的数量

function initialize() {
///// Stamford Bridge /////
var optionsSB = {
    zoom: 15,
    center: {lat:  51.481663, lng: -0.19095649999997022},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
}
mapSB = new google.maps.Map(document.getElementById("stamford-bridge"), optionsSB);
var markerSB = new google.maps.Marker({
    position: {lat:  51.481663, lng: -0.19095649999997022},
    map: mapSB,
    icon: '/images/map-pin.png'
});
var infowindowSB = new google.maps.InfoWindow({
       content:"<h3>Stamford Bridge</h3>"
});
infowindowSB.open(mapSB, markerSB);

///// O2 /////
var optionsO2 = {
    zoom: 15,
    center: {lat:  51.5030431, lng: 0.00423769999997603},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
}
mapO2 = new google.maps.Map(document.getElementById("o2"), optionsO2);
var markerO2 = new google.maps.Marker({
    position: {lat:  51.5030431, lng: 0.00423769999997603},
    map: mapO2,
    icon: '/images/map-pin.png'
});
var infowindowBow = new google.maps.InfoWindow({
       content:"<h3>O2</h3>"
});
infowindowBow.open(mapO2, markerO2);

///// London Zoo /////
var optionsZoo = {
    zoom: 15,
    center: {lat:  51.5352875, lng: -0.15343029999996816},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
}
mapZoo = new google.maps.Map(document.getElementById("zoo"), optionsZoo);
var markerZoo = new google.maps.Marker({
    position: {lat:  51.5352875, lng: -0.15343029999996816},
    map: mapZoo,
    icon: '/images/map-pin.png'
});
var infowindowZoo = new google.maps.InfoWindow({
       content:"<h3>London Zoo</h3>"
});
infowindowZoo.open(mapZoo, markerZoo);

函数初始化（）{
/////斯坦福桥/////
var期权SB={
缩放：15，
中心：{纬度：51.481663，液化天然气：-0.190956499997022}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
}
mapSB=新的google.maps.Map（document.getElementById（“斯坦福桥”），optionsb）；
var markerSB=新的google.maps.Marker({
位置：{lat:51.481663，lng:-0.190956499997022}，
地图:mapSB,，
图标：'/images/map pin.png'
});
var infowindowSB=新的google.maps.InfoWindow({
内容：“斯坦福桥”
});
infowindowSB.open（mapSB、markerSB）；
/////氧气/////
var optionsO2={
缩放：15，
中心：{lat:51.5030431，lng:0.00423769999797603}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
}
mapO2=新的google.maps.Map（document.getElementById（“o2”），options2）；
var markerO2=新的google.maps.Marker({
位置：{lat:51.5030431，lng:0.004237699997603}，
地图：mapO2，
图标：'/images/map pin.png'
});
var infowindowBow=new google.maps.InfoWindow({
内容：“O2”
});
infowindowBow.open（mapO2，markerO2）；
/////伦敦动物园/////
var optionsZoo={
缩放：15，
中心：{纬度：51.5352875，液化天然气：-0.1534302999996816}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
}
mapZoo=new google.maps.Map（document.getElementById（“zoo”），optionsZoo）；
var markerZoo=new google.maps.Marker({
位置：{lat:51.5352875，lng:-0.1534302999996816}，
地图：mapZoo，
图标：'/images/map pin.png'
});
var infowindowZoo=new google.maps.InfoWindow({
内容：“伦敦动物园”
});
infowindowZoo.open（mapZoo、markerZoo）；

---

}

只需将地图标记信息窗口创建包装在类似工厂的函数中：

function createMapWithStuff(options) {
   var map = new google.maps.Map(document.getElementById(options.id), options);
   var marker = new google.maps.Marker({
        position: options.center,
        map: map,
        icon: '/images/map-pin.png'
   });
   var infowindow = new google.maps.InfoWindow({
           content:"<h3>"+options.content+"</h3>"
   });
   infowindow.open(map, marker);
  }

  function initialize() {
    ///// Stamford Bridge /////
    var theoptions=[ {
        zoom: 15,
        center: {lat:  51.481663, lng: -0.19095649999997022},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        content:'Stamford Bridge',
        id:'stamford-bridge'
    },{
        zoom: 15,
        center: {lat:  51.5030431, lng: 0.00423769999997603},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
                content:'O2',
        id:'o2'
    },{
        zoom: 15,
        center: {lat:  51.5352875, lng: -0.15343029999996816},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        content:'London Zoo',
        id:'zoo'
    }];

    theoptions.forEach(function(optionObject) {
        createMapWithStuff(optionObject);       
    });

  }

函数createMapWithStuff（选项）{
var map=new google.maps.map（document.getElementById（options.id），options）；
var marker=new google.maps.marker({
位置：options.center，
地图：地图，
图标：'/images/map pin.png'
});
var infowindow=new google.maps.infowindow({
内容：“+选项。内容+”
});
信息窗口。打开（地图、标记）；
}
函数初始化（）{
/////斯坦福桥/////
变量选项=[{
缩放：15，
中心：{纬度：51.481663，液化天然气：-0.190956499997022}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
内容：'斯坦福桥'，
id:‘斯坦福桥’
},{
缩放：15，
中心：{lat:51.5030431，lng:0.00423769999797603}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
内容：'O2'，
id:‘o2’
},{
缩放：15，
中心：{纬度：51.5352875，液化天然气：-0.1534302999996816}，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
内容：'伦敦动物园'，
id:‘动物园’
}];
options.forEach（函数（optionObject）{
createMapWithStuff（optionObject）；
});
}