Primefaces googlemap not rendering

522 Views Asked by jpr At 07 April 2025 at 16:35

I have the following code to display googlemap using primefaces. This is not rendering the map. However if I set style="width:600px;height:400px" it is working fine. How do I get a full page view of the map in the browser?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=false&amp;v=3.4" type="text/javascript"></script>           
</h:head>
    <h:body>
        <f:view contentType="text/html">
            <h:form>
                <p:gmap center="#{loadBean.centerLatitude},#{loadBean.centerLongitude}" style="width:100%;height:100%" zoom="3" type="HYBRID"/>
            </h:form>
        </f:view>
    </h:body>
</html>

Original Q&A

There are 2 best solutions below

gvieira On 13 January 2014 at 16:05

There are 2 ways:

1 Just set absolute position to map:

<p:gmap tyle="width:100%;height:100%;position:absolute" center="#{loadBean.centerLatitude},#{loadBean.centerLongitude}" zoom="3" type="HYBRID"/>

2 You can also set the width and height to all the parents of the map.

Add:

<style type="text/css">
html, body {
width:100%;
height:100%;
}
</style>

Modify your <h:form>:

<h:form style="width:100%;height:100%">
. . .
</h:form>

Rahul Saini On 19 June 2017 at 12:19

It seems to be true that style="width:100%;height:100%" does not render the map. I tried it and a blank page comes. However, you need to strike balance w.r.t the height of the page. The below renders map with full width and height of 980 px for the page, and almost covers the entire webpage.

<p:gmap id="gmap" center="36.885233, 30.702323" zoom="13" type="MAP" style="width:100%;height:980px" model="#{addMarkersView.polyLineModel}"
                onPointClick="handlePointClick(event);" widgetVar="map" >
            <p:ajax event="overlaySelect" listener="#{addMarkersView.onPolylineSelect}" update="growl"/>
        </p:gmap>

Primefaces googlemap not rendering

There are 2 best solutions below

Related Questions in CSS

Related Questions in JSF

Related Questions in PRIMEFACES

Related Questions in PRIMEFACES-GMAP

Trending Questions

Popular # Hahtags

Popular Questions