gmap4jsf に問題があります。コードは次のとおりです。
<f:view contentType="text/html">
<h:form id="form">
<p:growl id="msg" showDetail="true"/>
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"
style="width:600px;height:400px"
model="#{addPlaceBean.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map" disableDoubleClickZoom="true">
</p:gmap>
<p:dialog widgetVar="dlg">
<h:form prependId="false">
<h:panelGrid columns="1">
<h:outputLabel value="Are you sure?"/>
<f:facet name="footer">
<p:commandButton value="Yes"
actionListener="#{addPlaceBean.addMarker}"
update=":form:msg"
oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>
<h:inputHidden id="lat" value="#{addPlaceBean.lat}"/>
<h:inputHidden id="lng" value="#{addPlaceBean.lng}"/>
</h:form>
</p:dialog>
<script type="text/javascript">
var currentMarker = null;
function handlePointClick(event) {
console.log("click event");
console.log(event.marker);
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())
});
map.addOverlay(currentMarker);
dlg.show();
}
}
function markerAddComplete() {
//currentMarker = null; Only one can be added.
dlg.hide();
}
function cancel() {
dlg.hide();
currentMarker.setMap(null);
currentMarker = null;
return false;
}
</script>
</h:form>
</f:view>
バッキング Bean は次のとおりです。
public void addMarker(ActionEvent actionEvent) {
System.err.println("Adding marker");
Marker marker = new Marker(new LatLng(lat, lng), title);
emptyModel.addOverlay(marker);
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
}
ご覧のとおり、gmap を使用した primefaces の「マーカーの追加」の例から取得したものです。私が使用しているプライムフェイスは 3.5 です。問題は、マップをダブルクリックしてマーカーを追加しても何も起こらないことです! はaddMarker(ActionEvent actionEvent)
実行されず、javascript 関数handlePointClick(event)
は行まで実行されてからcurrentMarker = new google.maps.Marker({
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
中断します (アラートでチェック - この行の後は表示されません)。例外はありません。率直に言って、何が起こっているのかわかりません (javascript の知識は私の得意分野ではありません)。<h:form>
内部のタグを削除しようとしましたが、機能しp:dialog
ません。disableDoubleClickZoom
属性を falseに変更すると、ダイアログが表示されずにマップが拡大されます。
私が間違っていることを教えてください。または、良い例を教えてください。
前もって感謝します。