Javascript Ajax调用后在模式中显示Google地图

所以我在一个网站上工作，我想在一个ajax调用后在一个模式中显示一个google地图。我用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>");
      }
    });
  });

这是地图加载时的外观：

---

有人知道我如何解决这个问题吗？非常感谢您的帮助

尝试将此添加到CSS类中

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

---

或者验证您是否为google maps attr async添加了脚本标记，好了，正如一些评论所说的那样，我已经找到了解决方案。我在

var marker=google….

之后的

get_order_details.php

文件中添加了一些javascript代码，以便在打开模式后重新绘制并居中我的地图：

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);
  });

• 在这里，由于ajax的模拟调用，您的地图没有加载。部分加载地图的主要原因是在ajax调用之后尝试加载地图
• 您可以利用Google Maps API来代替动态加载 google.maps.event.addDomListener（窗口“加载”，初始化）
  它们是： 函数initialize（）{//映射初始化代码}

---

我猜控制台是空白的？是的，控制台是空白的。没有出现错误@techLoveIt看起来没有初始化。我建议尝试：将google地图代码放入函数中并调用：success:function（data）{$（“.order details modal”）.html（data）；newfunc（）；}，好的，我刚刚尝试过，地图仍然显示为空白。：/@techLove@BrianMoreno我是否直接将这些属性赋予#地图画布？

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