显示谷歌地图在Modal后Ajax调用

Question

所以我正在一个网站，我想在ajax调用后显示模式内的谷歌地图。我使用bootstrap来显示一个模式，问题是地图在打开模式后保持空白。

发生的奇怪事情是当我在Chrome上点击f12以调出开发人员选项卡时，地图奇迹般地显示，尽管未居中于标记位置。

这是我的AJAX调用：

$('.btnSeeOrder').on("click", function(){ 
    $("#modalSeeOrder").modal("show"); //open bootstrap modal 
    var order_id = $(this).attr("data-orderId"); 

    $.ajax({ 
     type: "POST", 
     url: "get_order_details.php", 
     data: { 
     order_id: order_id 
     }, 
     beforeSend: function(){ 
     $(".order-details-modal").html("<i class='glyphicon glyphicon-refresh spinning'></i>"); 
     }, 
     success: function(data){ 
     $(".order-details-modal").html(data); 
     }, 
     error: function(){ 
     $(".order-details-modal").html("<b>Ooops... Error....</b>"); 
     } 
    }); 
    }); 

这是我get_order_details.php文件：

<?php 
    require '../../../app/Functions.php'; 
    $obj = new Admin_Functions(); 

    //Get order info, user info and map 
    $info = $obj->getOrderInfo($_POST['order_id']); 

?> 

<div class="row"> 
    <div class="col-lg-12" style="margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #ccc;"> 
    <div class="row"> 
     <div id="map-canvas" style="width: 100%; height: 400px;"></div> 

    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
// latitude and longitude are being loaded in from the database 
// example coords from database: 50.44444,-19.444444 

var myLatlng = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>); 
var mapOptions = { 
    zoom: 16, 
    center: myLatlng, 
    styles: 
    [{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"-100"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#e9e5dc"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"color":"#545454"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"saturation":"-87"},{"lightness":"-40"},{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#f0f0f0"},{"saturation":"-22"},{"lightness":"-16"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"saturation":"-52"},{"hue":"#00e4ff"},{"lightness":"-16"}]}] 
} 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    icon: 'https://www.robotevents.com/images/maps/markers/orange.png' 
}); 
</script> 

这是地图的外观时加载，如：

有谁知道如何我可以修复或解决这个问题？任何帮助是极大的赞赏！

Answer 1

好，从而一些评论说，和研究一个更位I已找到解决方案。我加了一些JavaScript代码在我get_order_details.php文件var marker = google....后重绘和中心我的地图模式被打开后：

google.maps.event.addListenerOnce(map, 'idle', function() { 
    google.maps.event.trigger(map, 'resize'); 

    // Recenter the map now that it's been redrawn 
    var reCenter = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>); 
    map.setCenter(reCenter); 
    }); 

所以里面get_order_details.php整个JavaScript的结束这样看：

<script type="text/javascript"> 
    //Show google map 
    var myLatlng = new google.maps.LatLng(<?php echo explode(",", $info[0]["lat_lng"])[0]; ?>,<?php echo explode(",", $info[0]["lat_lng"])[1]; ?>); 
    var mapOptions = { 
    zoom: 16, 
    center: myLatlng, 
    styles: 
    [{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"-100"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#e9e5dc"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"color":"#545454"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"saturation":"-87"},{"lightness":"-40"},{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#f0f0f0"},{"saturation":"-22"},{"lightness":"-16"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"saturation":"-52"},{"hue":"#00e4ff"},{"lightness":"-16"}]}] 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    icon: 'https://www.robotevents.com/images/maps/markers/orange.png' 
    }); 

    //Redraw and center map 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
    google.maps.event.trigger(map, 'resize'); 

    // Recenter the map now that it's been redrawn 
    var reCenter = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>); 
    map.setCenter(reCenter); 
    }); 
</script> 

Answer 2

试图在你的CSS类添加此

._gmaps_cdv_{ 
    background-color: transparent !; 
    padding: 0px !important; 
} 

或者，如果你把在谷歌脚本标签验证映射ATTR异步