Максимизировать gmap в диалоговом диалоговом окне

Question

Я хочу отобразить диалоговое окно с элементом gmap, он отлично работает, когда я устанавливаю высоту и ширину, но мне нужно показать его как максимально полную экранную карту. Диалог отображается в полноэкранном режиме, но карта пуста, только когда я возвращаюсь к размеру по умолчанию, он отображается.

Мой код

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

Как я могу решить мою проблему?

Answer 1

Вы можете добавить следующую JavaScript на странице

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

, а затем добавить resizePfGmapInsideDialog() в p:commandLink onclick

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

На самом деле, когда вы звоните PF('dlg').toggleMaximize(); также называют resizePfGmapInsideDialog() сразу после и p:gmap будет автоматически изменять размер внутри содержимого окна редактора площадь.