Когда появляется модальное окно, оно изменяет размер своего содержимого, чтобы оно соответствовало ему. Таким образом, размер вашего компонента карты Google изменился, и в результате его просто нужно обновить.
Просто добавьте следующий код в свой тег <script>.
$('.modal-trigger').leanModal({
ready: function() {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
Это должно сделать это :)
=== ИЗМЕНИТЬ ===
Я добавил образец того, что, как я думаю, может вам помочь. Этот образец инициализирует объект карты при загрузке страницы и использует тот же объект в модели.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/jquery-2.2.0.js" type="text/javascript"></script>
<script src="js/materialize.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$('.modal-trigger').leanModal({
ready: function () {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
});
</script>
</head>
<body>
<a href="#mapmodel" class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
<i class="red material-icons">location_on</i>
</a>
<div id="mapmodel" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Test</h4>
<div id="googleMap" style="width:500px;height:380px;"></div>
</div>
<div class="modal-footer">
<a href="#" class="red modal-action modal-close waves-effect waves-green btn-flat">Got it</a>
</div>
</div>
</body>
</html>
person
Vijay Chavda
schedule
03.04.2016
