Full Height gmap in primefaces

Question

I'm using primefaces ronin theme and I'm trying to make a full screen gmap no matter what the resolution of the screen is. how ever, unless I state the height in pixels, it won't work.

for example, if i set the height css attribute of the map to 100%, it doesn't show, and if I wrap the gmap with a div container with 100% height, it still doesn't work. how can I make a full screen responsive gmap?

Answer 1

You can show a full screen responsive p:gmap on following way:

Lets assume that p:gmap is defined like this (no need for style attribute)

<p:gmap id="gmap" center="41.381542, 2.122893" zoom="13" type="hybrid" />

Place following JavaScript on your page that will do the trick

         <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 resizePfGmapFullScreen() {
                var width = window.innerWidth - 20;
                var height = window.innerHeight - 20;

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

            window.onload = function() {
                window.dispatchEvent(new Event('resize'));
            };

            window.onresize = function(event) {
                console.log("Screen is resized");

                resizePfGmapFullScreen();
            };
        </script>

Advantage of this solution is that p:map will be automatically resized when screen is resized including screen orientation change on mobile devices.

It is tested running on the latest Primefaces version 6.1.