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?

Have you found an answer? – Jonathas Pacífico Dec 21 '15 at 11:04 — Jonathas Pacífico, Dec 21 '15 at 11:04

score 1 · Answer 1 · answered Nov 17 '17 at 11:05

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.

Full Height gmap in primefaces

1 Answers1