GMap - Info Window
When a marker is selected, an info window can be displayed to provide detailed information.
Documentation
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<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>
@Named
@ViewScoped
public class InfoWindowView implements Serializable {
private MapModel advancedModel;
private Marker 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 getAdvancedModel() {
return advancedModel;
}
public void onMarkerSelect(OverlaySelectEvent event) {
marker = (Marker) event.getOverlay();
}
public Marker getMarker() {
return marker;
}
}
