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.
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&sensor=true"></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({
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
PF('map').addOverlay(currentMarker);
PF('dlg').show();
}
}
function markerAddComplete() {
var title = document.getElementById('title');
currentMarker.setTitle(title.value);
title.value = "";
currentMarker = null;
PF('dlg').hide();
}
function cancel() {
PF('dlg').hide();
currentMarker.setMap(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">
<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" action="#{addMarkersView.addMarker}" update=":messages"
oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>
<h:inputHidden id="lat" value="#{addMarkersView.lat}"/>
<h:inputHidden id="lng" value="#{addMarkersView.lng}"/>
</h:form>
</p:dialog>
@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));
}
}