Google Map JavaScriptコードを簡略化

Question

Google Maps APIコードを使用して、1ページで3つのGoogleマップを初期化しています。ここで

はjsfiddleです：https://jsfiddle.net/adamjesmith/e53yjye8/

次のコードは正常に動作しますが、私は思っていたとにかくがあれば、私は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); 

}

Answer 1

ただ、工場のような機能で、マップマーカー、情報ウィンドウの作成をラップ：

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);  
    }); 

    } 

See the fiddle