Google지도로 원격 부트 스트랩 모달

Question

Ajax 모달에 Google지도가로드되는 데 문제가 있습니다. 그것이 보여주는 것은 모달에서 회색 윤곽입니다. 모달 외부에서 작동하기 때문에 Google Maps API가 있다는 것을 알고 있습니다. 어떤 도움을 주시면 감사하겠습니다.

색인 페이지 자바 스크립트

$('.update').click(function(e) { 
    $('body').modalmanager('loading'); 
    $("#ajax-modal-1").load('detail.php', '', function(){ 
      $("#ajax-modal-1").modal().addClass('modal-big'); 
    }); 
}); 

모달 HTML

... 
<div class="row"> 
    <div class="col-sm-12"> 
     <div class="gmap" id="gmap"></div> 
    </div> 
</div> 
... 

모달 자바 스크립트

... 
$('body').on('show.bs.modal', '#ajax-modal-1', function() { 
    google.maps.event.addDomListener(window, 'load', initialize); 

}); 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8 
    }; 
    var map = new google.maps.Map(document.getElementById("gmap"), 
     mapOptions); 
} 
... 

Answer 1

followi 시도 모달 자바 스크립트에서 NG :

var map;   
var location = new google.maps.LatLng(-34.397, 150.644); 
var marker = new google.maps.Marker({ position : location }); 

function initialize() { 
    var mapOptions = { ... }; 
    map = new google.maps.Map(document.getElementById("gmap"), mapOptions); 
    marker.setMap(map); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 
    }); 
}; 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, "resize", resizingMap()); 

$('#ajax-modal-1').on('show.bs.modal', function() { 
    resizeMap(); 
}) 

function resizeMap() { 
    if(typeof map =="undefined") return; 
    setTimeout(function(){resizingMap();} , 400); 
} 

function resizingMap() { 
    if(typeof map =="undefined") return; 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
} 

HTML : 작동하지 않았다

<a href="#ajax-modal-1" class="btn" data-toggle="modal">Launch Modal</a> 

<div class="modal fade" id="ajax-modal-1"> 
    ... 
    <div id="gmap"></div> 
    ... 
</div>