PrimeFaces GMap Inside div Element Does Not Show Up

Question

I have a GMap inside a div with display:none;.

Inside the div is a PrimeFaces map component.

After clicking on a button, the content of the div element should appear, but only a blank page is showing.

<div class="form-group" id="mapContainer" style="display:none;">
    <p:gmap id="gmap" center="51.30993291552862,9.448113441467285" zoom="15" type="terrain" style="width:100%;height:700px;" widgetVar="gmap" navigationControl="false" />
</div>

But outside the div element, the map is built and showing correctly.

How can I solve this problem?

Answer 1

As mentioned in one of comments, google map object is not initialized if mapContainer div is hidden (display: none) during page load...

so you will need to "manually" initialize google map object after you make mapContainer div visible.

Here is fully working code (based on your posted code) that will do what you need:

Add this JavaScript to 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 resizePfGmapInsideDiv(){
            var gmap = PF('gmap').getMap();
            console.log(gmap);

            resizePfGmapInsideWrapperElement("mapContainer");
        }

        function toggleDivVisibility() {
            var div = document.getElementById("mapContainer");
            if(div.style.display === "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
                div.style.width="600px";
                div.style.height="400px";
                initializeGmap();
                resizePfGmapInsideDiv();
            }
        }

        function initializeGmap() {
            var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(51.30993291552862, 9.448113441467285),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }
            new google.maps.Map(document.getElementById("gmap"),myOptions);
         }

    </script>

and, just for testing purposes, add a button that will toggle mapContainer div visibility

<p:commandButton value="Show/hide map" onclick="toggleDivVisibility();"/>

The crucial JS method is self-explanatory initializeGmap() executed in the moment when you make div visible: it will create "a new map inside of the given HTML container, which is typically a DIV element." as stated in documentation referenced above.