Google Map not loaded in second time in bootstrap modal - google-maps

Question

This script is creating a problem that when i used to load google map in bootstrap modal.
First time map is loaded but with second time map is not loaded fully.
<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>
in function when assigning map variable again in modal is creating problem so to remove conflict just remove var map when assingin it to google.maps

Answer 2

This is meant to be a comment but I am not allowed to add comments at this time.
I also experience the same in an MVC app. Modal content (resource title and map) is loaded as partial view from a controller action. First map loads nicely but next map(s) are clipped and only top left part shows. Using Bootstrap 3.
It is worth mentioning that if you refresh the page, the map loads well but that's not practical.