	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

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 Faces component you can still take advantage of the full Google Maps API.

Gmap Tag Documentation

GMap component is built on Google Maps API Version 3 and is highly integrated with Faces and enhanced with AJAX capabilities.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side component.
apiKey	String	false		Google Maps API key.
apiVersion	String	false	weekly	Google Maps API version.
center	String	true		Center point of the map.
disableDefaultUI	boolean	false	false	Disables default UI controls.
disableDoubleClickZoom	boolean	false	false	Disables zooming on mouse double click.
draggable	boolean	false	true	Defines draggability of map.
fitBounds	boolean	false	false	Defines if center and zoom should be calculated automatically to contain all markers on the map.
libraries	String	false		Comma-separated list of additional Google Maps libraries to load.
mapId	String	false	DEMO_MAP_ID	Google Maps map ID, required by AdvancedMarkerElement. DEMO_MAP_ID is for testing only, use your own map ID in production.
mapTypeControl	boolean	false	true	Defines visibility of map type control.
model	MapModel	false		An org.primefaces.model.MapModel instance.
navigationControl	boolean	false	true	Defines visibility of navigation control.
onPointClick	String	false		Javascript callback to execute when a point on map is clicked.
scrollWheel	boolean	false	true	Controls scrollwheel zooming on the map.
streetView	boolean	false	false	Controls street view support.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
type	String	true		There are four types of maps available: roadmap, satellite, hybrid, and terrain.
zoom	int	true	8	Defines the initial zoom level.

Name	Description
No records found.

Name	Type	Default	Description
overlaySelect	OverlaySelectEvent	false	Fires when an overlay is selected.
overlayDblSelect	OverlaySelectEvent	false	Fires when an overlay is double-clicked.
stateChange	StateChangeEvent	false	Fires when map state changes.
pointSelect	PointSelectEvent	false	Fires when a point on the map is selected.
pointDblSelect	PointSelectEvent	false	Fires when a point on the map is double-clicked.
markerDrag	MarkerDragEvent	false	Fires when a marker is dragged.
geocode	GeocodeEvent	false	Fires when geocoding is performed.
reverseGeocode	ReverseGeocodeEvent	false	Fires when reverse geocoding is performed.

Name	Library	Target
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces
gmap/gmap.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.GMap

Class org.primefaces.component.gmap.GMap

Renderer Type org.primefaces.component.GMapRenderer

Renderer Class org.primefaces.component.gmap.GMapRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

ON THIS PAGE

Basic Event Markers Selection Add Markers Draggable InfoWindow Polylines Polygons Circles Rectangles StreetView Controls Geocode Dialog


<script src="https://maps.google.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&amp;libraries=marker"></script>
<script>
    var currentMarker = null;

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

            currentMarker = new google.maps.marker.AdvancedMarkerElement({
                position: event.latLng
            });

            PF('map').addOverlay(currentMarker);

            PF('dlg').show();
        }
    }

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

        currentMarker = null;
        PF('dlg').hide();
    }

    function cancel() {
        PF('dlg').hide();
        currentMarker.map = null;
        currentMarker = null;

        return false;
    }
</script>


<p:growl id="messages" showDetail="true"/>
<div class="card">
    <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"/>
</div>
<p:dialog widgetVar="dlg" showEffect="fade">
    <h:form prependId="false">
        <div class="formgrid grid p-fluid">
            <div class="field col-12">
                <h:outputLabel for="title" value="Title"/>
                <p:inputText id="title" value="#{addMarkersView.title}"/>
            </div>
        </div>

        <div class="flex gap-2">
            <p:commandButton value="Add" action="#{addMarkersView.addMarker}" update=":messages"
                             oncomplete="markerAddComplete()"/>
            <p:commandButton value="Cancel" onclick="return cancel()"/>
        </div>

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


package org.primefaces.showcase.view.data.gmap;

import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;

import java.io.Serializable;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;

@Named
@RequestScoped
public class AddMarkersView implements Serializable {

    private MapModel<Object> emptyModel;
    private String title;
    private double lat;
    private double lng;

    @PostConstruct
    public void init() {
        emptyModel = new DefaultMapModel<>();
    }

    public MapModel<Object> getEmptyModel() {
        return emptyModel;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public double getLat() {
        return lat;
    }

    public void setLat(double lat) {
        this.lat = lat;
    }

    public double getLng() {
        return lng;
    }

    public void setLng(double lng) {
        this.lng = lng;
    }

    public void addMarker() {
        Marker<Object> marker = new Marker<>(new LatLng(lat, lng), title);
        emptyModel.addOverlay(marker);

        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
    }
}

GMap Adding Markers

Gmap Tag Documentation

Usage

Reloading page