最大化对话框素数中的gmap

Question

I want to display a dialog which has a gmap as element, it works fine when I set height and width, but what I need is show it as maximized full screen map. The Dialog is shown in fullscreen, but map is empty, only when I back to default size it is shown.

My code is

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

How can I solve my problem?

Answer 1

You can add following JavaScript on your page

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

and then add resizePfGmapInsideDialog() into p:commandLink onclick

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

Actually whenever you call PF('dlg').toggleMaximize(); also call resizePfGmapInsideDialog() right after and p:gmap will automatically resize inside dialog's content area.