Google地图未在bootstrap模式中第二次加载

Question

这个脚本正在创建一个问题，当我以前在bootstrap模式中加载谷歌地图。 加载了第一张时间图，但第二张时间图未完全加载。

<script>

var map = '';

function showmap(){

if(!map){
 var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(23.6459, 81.9217),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
    position: map.getCenter(), 
    map: map
});
google.maps.event.addListener(map, "click", function(){
  document.getElementById("latitude").value = map.getCenter().lat();
  document.getElementById("longitude").value = map.getCenter().lng();
  marker.setPosition(map.getCenter());
  //document.getElementById("zoom").value = map.getZoom();
});
google.maps.event.addListener(map, "center_changed", function(){
  document.getElementById("latitude").value = map.getCenter().lat();
  document.getElementById("longitude").value = map.getCenter().lng();
  marker.setPosition(map.getCenter());
  //document.getElementById("zoom").value = map.getZoom();
});
}
}



</script> 

Answer 1

<script>

    var map = '';
    function showmap(){

    if(!map){
    var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(23.6459, 81.9217),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
^^^^ Remove var from here and it works fine
    var marker = new google.maps.Marker({
    position: map.getCenter(), 
    map: map
    });
    google.maps.event.addListener(map, "click", function(){
    document.getElementById("latitude").value = map.getCenter().lat();
    document.getElementById("longitude").value = map.getCenter().lng();
    marker.setPosition(map.getCenter());

    });

    }
    }



</script> 

在模态中再次分配地图变量的函数

正在创建问题所以要删除冲突只需删除var map到google.maps

Answer 2

这是一个评论，但目前我不允许添加评论。 我也在MVC应用程序中体验过相同的内容。模态内容（资源标题和地图）作为部分视图从控制器操作加载。第一个地图加载很好，但下一个地图被剪裁，只有左上角部分显示。使用Bootstrap 3。 值得一提的是，如果刷新页面，地图加载得很好，但这不实用。