The gmap
component provides ways to integrate Google Maps into JSF applications. It is built upon Google Maps API V3.
In order to use the component, the Google Maps API script should be referenced from the page, ideally in the header section:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
The sensor
parameter in the URL is mandatory, and it specifies whether the application requires a sensor, such as a GPS locator.
A simple definition of placing a map canvas on page is given here:
<p:gmap center="41.106261, 29.057465" zoom="10" type="hybrid" style="width:600px;height:400px" />
This output will be rendered as follows:
The gmap
component depicts four attributes that should be set, as shown in the previous example, in order to use the map canvas properly. The center
attribute defines the center of the map in the [latitude, longitude]
format. The zoom
attribute defines the zoom level of the map. Zoom levels between 0
(the lowest zoom level, in which the entire world can be seen on one map) and 21+
(down to individual buildings) are possible. The type
attribute declares the type of the map with one of the following values: roadmap
(the default value), satellite
, hybrid
, or terrain
. The style
attribute could be used to define dimensions of the map canvas.
It is also possible to bind the component to a model with an instance of org.primefaces.model.map.MapModel
. PrimeFaces provides org.primefaces.model.map.DefaultMapModel
as the default model implementation. DefaultMapModel
is a wrapper class for markers, polylines, polygons, circles, and rectangles. Here's how you can bind the gmap
component to a model:
<p:gmap center="41.106261, 29.057465" zoom="10" type="roadmap" style="width:600px;height:400px" model="#{mapBean.markerModel}" />
The gmap
component provides the disableDefaultUI
attribute. By setting it to true
, controls will be removed regardless of the status of other attributes. The disabledDoubleClickZoom
attribute disables zooming on double-click. The draggable
attribute defines the "draggability" of the map; it could be used to define static maps, which means no panning.
The gmap
component provides two attributes—navigationControl
and mapTypeControl
—to set the visibility of map controls. The mapTypeControl
attribute enables/disables the map type control that lets the user toggle between map types (such as Map and Satellite). By default, this control is visible and appears in the top-right corner of the map. The visibility of the navigation controls can be set with the navigationControl
attribute.
In version 5.2, the navigationControl
and mapTypeControl
attributes do not work as expected. Please use the disableDefaultUI
attribute to enable/disable all controls.
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/map.jsf
.
3.145.17.18