Javascript google地图未在下渲染。折叠引导

我到处都找过了，开始发疯了。我知道我已经很接近了，但是我无法得到它

我有我的html：

<div id="glasgow-map" class="collapse">
    <div class="map">
<div id="map-canvas" style="width:100%; height:350px;"></div>
    </div>
    </div><!--end collapse-->

从我看到的所有其他信息中，我知道我需要地图，但我在控制台中遇到以下错误：

未捕获引用错误：未定义映射

---

任何帮助都会很棒。这是漫长的一天

谢谢你的帮助@kamlesh，我认为你是对的，但这是我最终设法让它工作的方式，还有多张地图-如果有人需要帮助，请看下面

我剥离了google.maps.event.addDomListenerwindow的“加载”，初始化；并在.collapse按钮中添加了当单击时的初始化。这样就不需要调整大小

function initialize() {
  var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
  var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
  var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);

  var mapOptions = {
   zoom: 16,
 center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
 zoom: 16,
 center: myLatlng2,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
 zoom: 16,
  center: myLatlng3,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map2,
    title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
    position: myLatlng3,
    map: map3,
    title: 'Taylor Hopkinson Associates'
});

}




$('#glasgow-map').on('shown.bs.collapse', function (e) {
    initialize();

    })

$('#london-map').on('shown.bs.collapse', function (e) {
initialize();

    })

$('#bromley-map').on('shown.bs.collapse', function (e) {
    initialize();

    })

也许有一种方法可以简化这段代码，但它确实对我有效

function initialize() {
  var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
  var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
  var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);

  var mapOptions = {
   zoom: 16,
 center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
 zoom: 16,
 center: myLatlng2,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
 zoom: 16,
  center: myLatlng3,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map2,
    title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
    position: myLatlng3,
    map: map3,
    title: 'Taylor Hopkinson Associates'
});

}




$('#glasgow-map').on('shown.bs.collapse', function (e) {
    initialize();

    })

$('#london-map').on('shown.bs.collapse', function (e) {
initialize();

    })

$('#bromley-map').on('shown.bs.collapse', function (e) {
    initialize();

    })