GMap - Adding Markers This examples demonstrates how to add a marker and keep client side representation in sync with the server side model. Even though you use Google Maps as a JSF component you can still take advantage of the full Google Maps API.
<p:growl id="messages" showDetail="true" />

<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:100%;height:400px"
    model="#{addMarkersView.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" />

<p:dialog widgetVar="dlg" showEffect="fade">
    <h:form prependId="false">
        <h:panelGrid columns="2">
            <h:outputLabel for="title" value="Title:" />
            <p:inputText id="title" value="#{addMarkersView.title}" />

            <f:facet name="footer">
                <p:commandButton value="Add" actionListener="#{addMarkersView.addMarker}" update=":messages" oncomplete="markerAddComplete()" />
                <p:commandButton value="Cancel" onclick="return cancel()" />

        <h:inputHidden id="lat" value="#{}" />
        <h:inputHidden id="lng" value="#{addMarkersView.lng}" />

<script type="text/javascript">
    var currentMarker = null;

    function handlePointClick(event) {
        if(currentMarker === null) {
            document.getElementById('lat').value =;
            document.getElementById('lng').value = event.latLng.lng();

            currentMarker = new google.maps.Marker({
                position:new google.maps.LatLng(, event.latLng.lng())



    function markerAddComplete() {
        var title = document.getElementById('title');
        title.value = "";

        currentMarker = null;

    function cancel() {
        currentMarker = null;

        return false;
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2 on Mojarra-2.3.2.