primefaces div要素内のgmapが表示されない

Question

div内にgmapがあり、div内にdisplay:none;が含まれています。ボタンをクリックするとdiv要素の内容が表示されますが、空白のページだけが表示されます。

<div class="form-group" id="mapContainer" style="display:none;"> <p:gmap id="gmap" center="51.30993291552862,9.448113441467285" zoom="15" type="terrain" style="width:100%;height:700px;" widgetVar="gmap" navigationControl="false" /> </div>

が、DIV要素の外側、マップを構築し、正しく表示されています。

ご協力いただきありがとうございます。

Answer 1

コメントの1で述べたようmapContainer div要素が隠されている場合は、Googleマップのオブジェクトが初期化されていない（display: none）ページのロード中...

あなたがmapContainerのdivを作成した後、あなたが「手動」google map objectを初期化する必要があります。可視。ここで

は完全にあなたが必要なものを行います（あなたの投稿コードに基づく）コードを働いている：

追加し、あなたのページに

<script> 
     function resizeElement(elementId,width,height){ 
      console.log("Resizing element " + elementId + " W/H="+ width + "/" + height); 

      var element = document.getElementById(elementId); 

      element.style.width=width+"px"; 
      element.style.height=height+"px" 
     } 

     function resizePfGmapInsideWrapperElement(wrapperElementId){ 
      var wrapperElement=document.getElementById(wrapperElementId); 
      var width=wrapperElement.clientWidth-40; 
      var height=wrapperElement.clientHeight-60; 

      resizeElement("gmap",width,height); 
     } 

     function resizePfGmapInsideDiv(){ 
      var gmap = PF('gmap').getMap(); 
      console.log(gmap); 

      resizePfGmapInsideWrapperElement("mapContainer"); 
     } 

     function toggleDivVisibility() { 
      var div = document.getElementById("mapContainer"); 
      if(div.style.display === "block"){ 
       div.style.display = "none"; 
      }else{ 
       div.style.display = "block"; 
       div.style.width="600px"; 
       div.style.height="400px"; 
       initializeGmap(); 
       resizePfGmapInsideDiv(); 
      } 
     } 

     function initializeGmap() { 
      var myOptions = { 
       zoom: 15, 
       center: new google.maps.LatLng(51.30993291552862, 9.448113441467285), 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      } 
      new google.maps.Map(document.getElementById("gmap"),myOptions); 
     } 

    </script> 

と、単にテスト目的のために、このJavaScriptを追加します。 mapContainer DIV可視性

<p:commandButton value="Show/hide map" onclick="toggleDivVisibility();"/> 

重要JS方法をトグルするボタンは自明であるdivを可視にした時点でが実行されます。"指定されたHTMLコンテナの内部に新しいマップ（通常はDIV要素）が作成されます。に記載されています。