When a marker is selected, an info window can be displayed to provide detailed information.
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&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;
    }
}