Primefaces googlemap not rendering
Question
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&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>
2 answers
solution1
0 2014-01-13 16:05: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>
solution2
0 2017-06-19 12:19:38
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 wrt 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.