當默認隱藏html標記時，Google Map不會呈現整個框架

Question

在我的應用程序中，當用戶單擊顯示的按鈕時，我需要默認隱藏谷歌地圖。我的問題是，當點擊按鈕地圖不能在整個框架內正確呈現時。

<div id="map-canvas" style="display: none"></div> 

這裏是我的javascript功能

function show(){ 
       if(document.getElementById("showMap").value == "Show Map"){ 
        document.getElementById("showMap").value = "Hide Map"; 
        document.getElementById("map-canvas").style.display = ''; 

       } 
       else{ 
        document.getElementById("showMap").value = "Show Map"; 
        document.getElementById("map-canvas").style.display = 'none'; 
       } 
      } 

這裏是我的谷歌地圖加載器功能。

function initialize() { 
      var mapOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(7.7, 80.7) 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

還使用一些CSS。

#map-canvas { 
     height: 100%; 
     width: 80%; 
     margin: 0px; 
     padding: 0px 
    } 

我該如何解決這個問題？

Answer 1

隱藏地圖畫布

document.getElementById("map-canvas").style.visibility = "hidden"; 

顯示地圖畫布

document.getElementById("map-canvas").style.visibility = "visible"; 

您可以使用jQuery - 顯示（），hide（）和切換（）做相同。