	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 Info Window

When a marker is selected, an info window can be displayed to provide detailed information.

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 widget.
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 DocumentationNew DocumentationNew 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;sensor=false"></script>

<div class="card">
    <h:form prependId="false">
        <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"
                model="#{infoWindowView.advancedModel}" style="width:100%;height:400px">

            <p:ajax event="overlaySelect" listener="#{infoWindowView.onMarkerSelect}"/>

            <p:gmapInfoWindow id="infoWindow">
                <p:outputPanel style="text-align: center; display: block; margin: auto">

                    <p:graphicImage name="/demo/images/antalya/#{infoWindowView.marker.data}" height="150"/>
                    <br/>
                    <h:outputText value="#{infoWindowView.marker.title}"/>

                </p:outputPanel>
            </p:gmapInfoWindow>
        </p:gmap>

        <!-- Preload for demo -->
        <p:outputPanel style="display:none">
            <p:graphicImage name="/demo/images/antalya/konyaalti.png"/>
            <p:graphicImage name="/demo/images/antalya/ataturkparki.png"/>
            <p:graphicImage name="/demo/images/antalya/kaleici.png"/>
            <p:graphicImage name="/demo/images/antalya/karaalioglu.png"/>
        </p:outputPanel>
    </h:form>
</div>


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

import org.primefaces.event.map.OverlaySelectEvent;
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.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named
@ViewScoped
public class InfoWindowView implements Serializable {

    private MapModel<String> advancedModel;

    private Marker<String> marker;

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

        //Shared coordinates
        LatLng coord1 = new LatLng(36.879466, 30.667648);
        LatLng coord2 = new LatLng(36.883707, 30.689216);
        LatLng coord3 = new LatLng(36.879703, 30.706707);
        LatLng coord4 = new LatLng(36.885233, 30.702323);

        //Icons and Data
        advancedModel.addOverlay(new Marker<>(coord1, "Konyaalti", "konyaalti.png", "https://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
        advancedModel.addOverlay(new Marker<>(coord2, "Ataturk Parki", "ataturkparki.png"));
        advancedModel.addOverlay(new Marker<>(coord4, "Kaleici", "kaleici.png", "https://maps.google.com/mapfiles/ms/micons/pink-dot.png"));
        advancedModel.addOverlay(new Marker<>(coord3, "Karaalioglu Parki", "karaalioglu.png", "https://maps.google.com/mapfiles/ms/micons/yellow-dot.png"));
    }

    public MapModel<String> getAdvancedModel() {
        return advancedModel;
    }

    public void onMarkerSelect(OverlaySelectEvent<String> event) {
        marker = (Marker) event.getOverlay();
    }

    public Marker<String> getMarker() {
        return marker;
    }
}

GMap Info Window

Gmap Tag Documentation

Usage

Reloading page