The gmap
component uses the gmapInfoWindow
helper component to display a component that renders two markers with an information window attached.
A basic definition of gmap
with the information window is given here:
<p:gmap id="withInformation" center="41.106261, 29.057465" zoom="10" type="roadmap" style="width:600px;height:400px" model="#{mapBean.markerModel}"> <p:ajax event="overlaySelect" listener="#{mapBean.selectMarker}" /> <p:gmapInfoWindow id="infoWindow"> <p:graphicImage value="/resources/images/map/#{mapBean.selectedMarker.data}" /> </p:gmapInfoWindow> </p:gmap>
It is possible to enable the street view by setting the streetView
attribute to true
. Then, the user will be able to drag the human icon onto the blue lines on the map, which depict the viewable streets/roads. This is shown in the following screenshot:
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter9/mapInfoView.jsf
.