Javascript 隐藏div中的谷歌地图

基本上，我们有一个按钮，点击一次，图像就会淡出，显示下面的谷歌地图（Gmap全屏显示图像）。但当我按下按钮，图像淡出时，地图就不显示了。根本没有出现

这是我的html结构

    <div id="map" class="wrapMap hidden-xs hidden-sm">
       <div class="hidden-xs hidden-sm" id="map-canvas"></div>
    </div>

    <div class="img_img row hidden-xs hidden-sm">
       <div class="col-md-12 col-lg-12">
          <img class="img-responsive" src="../img/home_img.jpg" alt="" />
       </div>
    </div>

    <div class="row row-home-img">
       <div class="col-md-2 col-lg-2 hp-img-map">
            <p class="view-map"><span class="glyphicon glyphicon-map-marker"></span> View map</p>
       </div>
    </div>

Jquery

    $(".row-home-img").on("click", function(){
       $(".img_img").fadeTo(500, 0, function(){
          $(".wrapMap").show();             
       });
    });

我读过关于在div可见后将其添加到jQuery的内容，但它对我不起作用

var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

$。show（）

会将显示设置为

块

，但不会覆盖！重要规则定义了全局样式

一些选择：

通过cssText设置样式：

  $(".row-home-img").on("click", function(){
       $(".img_img").fadeTo(500, 0, function(){
          $(".wrapMap")[0].style.cssText='display:block !important';           
       });
    });

我更愿意使用仅包含以下内容的其他类：

display: none !important;

---

将此类添加到.wrapMap中，而不是使用show（）删除此类

将img移动到地图的container div中：

    <div id="map" class="wrapMap hidden-xs hidden-sm">
       <div class="img_img row">
          <div class="col-md-12 col-lg-12">
            <img class="img-responsive" src="../img/home_img.jpg" alt="Rent a boat to sail" />
          </div>
       </div>
       <div class="hidden-xs hidden-sm" id="map-canvas"></div>
    </div>

---

并删除了

显示：无！重要信息

来自css

$（“.wrapMap”）.show（）（您已插入括号）已修复。那是个打字错误。问题仍然存在。创建一个小提琴你当前的实施当图像淡出，gmap显示将由我自己解决。检查我的答案。非常感谢
    <div id="map" class="wrapMap hidden-xs hidden-sm">
       <div class="img_img row">
          <div class="col-md-12 col-lg-12">
            <img class="img-responsive" src="../img/home_img.jpg" alt="Rent a boat to sail" />
          </div>
       </div>
       <div class="hidden-xs hidden-sm" id="map-canvas"></div>
    </div>

$(".row-home-img").on("click", function(){
    $(".img_img").fadeTo(500, 0, function(){
        $(this).css("display","none");
        initialize();
        google.maps.event.addListener(map,"idle", function(){ 
            $("#map-canvas").css({ opacity: 1, zoom: 1});
        });             
    });
});