谷歌的隱藏的div

內部地圖基本上，我們有一個按鈕並在單擊圖像淡出示出下面的谷歌地圖（GMAP它被示出全畫面，因爲它是圖像）。但是當我點擊按鈕並且圖像淡出時，地圖不顯示。根本沒有出現。谷歌的隱藏的div

這是我的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>

的CSS（注意如果我不使用!important股利不躲，我相信這是由於gmaps加載）

.wrapMap { 
    height: 100%; 
    width: 100%; 
    display: none !important; 
}

jQuery的

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

我讀到這個添加到jQuery的一次股利是可見的，但它不是爲我工作

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

http://jsfiddle.net/5fEA9/

來源

2014-02-06 rob.m

'$（「wrapMap。」）顯示（）;'（你」。已省略括號） –

固定。那是一個錯字。問題仍在。 –

創建你一個小提琴當前實現 –

移動了內部的img con地圖TAINER格：

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

然後在jQuery的

$(".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}); 
     });    
    }); 
});

並刪除了display: none !important從CSS

來源

2014-02-06 20:29:55

$.show()將顯示設置爲block，究竟會不會覆蓋！重要的規則定義的全局風格。

一些選項：

通過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（）刪除這個類

來源

2014-02-06 20:28:38

由我自己解決它。檢查我的答案。非常感謝 –

谷歌的隱藏的div

回答

相關問題