AjaxCore
- Listener
- PartialSubmit
- Counter
- Process
- Validation
- RemoteCommand
- Dropdown
- Basic
- Event
- Selector
- Search
- Poll
- Fragment
- Status
Input
- DatePicker
- Calendar
- Editor
- Signature
- Spinner
- Slider
- InputText
- InputSwitch
- Password
- Keyboard
- Rating
- ColorPicker
- Inplace
- KeyFilter
- Knob
- TextEditor
Button
Data
- Carousel
- DataGrid
- DataList
- DataView
- DataScroller
- DataTable
- HorizontalTree
- OrderList
- Organigram
- DataExporter
- GMap
- Mindmap
- Diagram
- PickList
- Repeat
- Ring
- Schedule
- TagCloud
- Tree
- TreeTable
- Timeline
Panel
- Accordion
- Dashboard
- Fieldset
- Grid CSS
- Layout
- NotificationBar
- OutputPanel
- FlexGrid
- Panel
- PanelGrid
- Ribbon
- ScrollPanel
- TabView
- Toolbar
- Wizard
Overlay
- Tooltip
- Dialog
- Sidebar
Menu
- Breadcrumb
- ContextMenu
- Dock
- MegaMenu
- Menu
- Menubar
- MenuButton
- PanelMenu
- SlideMenu
- Stack
- Steps
- TabMenu
- TieredMenu
Charts
- Area
- Bar
- Bubble
- Donut
- Line
- Pie
- MeterGauge
- OHLC
- Animate
- Export
- Interactive
- Live
- Static
- Zoom
- Combined
- MultiAxis
- Date
- Responsive
ChartJs
- Bar
- Bubble
- Donut
- Line
- Pie
- Scatter
- PolarArea
- Radar
- Mixed
- Interactive
- Export
Messages
- Growl
- Messages
- StaticMessage
Multimedia
- Compare
- GraphicImage
- ContentFlow
- Cropper
- Galleria
- Barcode
- Media
- PhotoCam
- Switch
File
- Upload
- Download
DragDrop
- Draggable
- DataGrid
- DataTable
- Custom
Client Side Validation
- Basic
- Bean
- Custom
- Event
Dialog Framework
- Basic
- Data
- Message
- Nested
Misc
- Responsive
- AutoUpdate
- ThemeSwitcher
- OutputLabel
- BlockUI
- Cache
- Captcha
- Clock
- Collector
- DefaultCommand
- Effect
- ExceptionHandler
- FeedReader
- IdleMonitor
- ImportConstants
- ImportEnum
- CSP
- PrimeIcons
- FontAwesome
- Lifecycle
- Log
- Focus
- Hotkey
- Printer
- ProgressBar
- Context
- ResetInput
- Resizable
- Separator
- Spacer
- Spotlight
- Sticky
- Terminal
- Watermark

GMap - Map in Dialog

This sample demonstrates using map inside a dialog.

mapDialog.xhtml

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>


<p:commandButton id="btn" type="button" icon="pi pi-globe" value="Show Map" onclick="PF('dlg').show();" />
			
<p:dialog id="gmapDialog" widgetVar="dlg" width="625" height="400" modal="true">
    <p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:400px" />
</p:dialog>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.