Maximiere gmap im Dialog primefaces

Question

Ich möchte einen Dialog anzeigen, der ein gmap als Element hat, es funktioniert gut, wenn ich Höhe und Breite einstelle, aber was ich brauche, ist es als maximierte Vollbild-Karte anzuzeigen. Der Dialog wird im Vollbild angezeigt, aber die Karte ist leer, nur wenn ich auf die Standardgröße zurückgebe, wird sie angezeigt.

Mein Code ist

<p:commandLink id="id" value="Modal" onclick="PF('dlg').show(); PF('dlg').toggleMaximize();"/> 
<p:dialog appendTo="@(body)" id="dlg" widgetVar="dlg" maximizable="true" width="1920" height="1080"> 
    <p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%;"> 
    </p:gmap> 
</p:dialog> 

Wie kann ich mein Problem zu lösen?

Answer 1

Sie können folgende JavaScript auf Ihrer Seite hinzufügen

<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 resizePfGmapInsideDialog(){ 
       resizePfGmapInsideWrapperElement("dlg"); 
      } 
</script> 

und dann resizePfGmapInsideDialog() hinzufügen in p:commandLink onclick

<p:commandLink id="id" 
       value="Modal" 
       onclick="PF('dlg').show(); PF('dlg').toggleMaximize(); resizePfGmapInsideDialog();"/> 

eigentlich, wenn Sie PF('dlg').toggleMaximize(); auch resizePfGmapInsideDialog() rufen rufen Sie direkt nach und p:gmap wird innerhalb Dialog Inhalt automatisch die Größe Bereich.