Google Map не загружается во второй раз в bootstrap modal

Question

Этот скрипт создает проблему, когда я загружал карту google в bootstrap modal. Карточка первого времени загружается, но вторая карта времени не загружена полностью.

<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> 

в функции при назначении переменной карты снова в модальном создают проблему так, чтобы удалить конфликт просто удалить карту уага когда assingin его Яндекс.Карты

Answer 2

Это должно быть комментарий, но я не имею права добавлять комментарии в это время. Я также испытываю то же самое в приложении MVC. Модальный контент (название ресурса и карта) загружается как частичный вид из действия контроллера. Первая карта загружается красиво, но следующая карта ограничена, и отображается только верхняя левая часть. Использование Bootstrap 3. Стоит отметить, что если вы обновите страницу, карта загрузится хорошо, но это нецелесообразно.