-
1. Re: googlemap functionality not working properly inside panelgrid
If you talking about RichFaces 3.3.3 - gmap component just do not suppots reRendering. it should be updated using it's js object as shown at livedemo.
If talking about RF 4.4 - do not remember that after any rendering of that area with map you should reinitialize attached JS objects. In other case it will not work for sure. And be carefull with memory leaks in that case.
-
2. Re: googlemap functionality not working properly inside panelgrid
Thnx Ilya for the reply.. yes m using richfaces 3.3.3 and the problem is that gmap is being displayed but the JS code inside googleMap.xhtml is not working at all.
-
3. Re: googlemap functionality not working properly inside panelgrid
googleMap.xhtml code:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head></head>
<style>
.optionList {
height: 30px;
}
</style>
<script type="text/javascript">
</script>
<h:panelGrid columns="2">
<rich:gmap gmapVar="map" zoom="#{gmBean.zoom}"
style="width:700px;height:500px" gmapKey="#{gmBean.gmapkey}"
id="gmap" enableContinuousZoom="false" enableDoubleClickZoom="true"
enableInfoWindow="true" oninit="loadPoints()" locale="getDefaultLocale()"/>
<h:panelGroup>
<h:form>
<a4j:jsFunction name="showPlace" data="#{gmBean.selectedLocation}"
reRender=":zoom"
oncomplete="showExadel(data);return false;">
<a4j:actionparam name="id" assignTo="#{gmBean.currentId}"> </a4j:actionparam>
</a4j:jsFunction>
<rich:dataGrid var="location" value="#{gmBean.point}" columns="2">
<h:graphicImage onclick="showPlace('#{location.id}')"
style="cursor:pointer; width:80px;height:80px;" value="resource://#{location.pic}" />
</rich:dataGrid>
<a4j:commandButton oncomplete="loadPoints()" value="find" />
<a4j:jsFunction name="loadPoints" data="#{gmBean.point}" oncomplete="createPoints(data)" />
</h:form>
</h:panelGroup>
</h:panelGrid>
<a4j:outputPanel id="zoomer">
<script>
function zoomIt() {
map.setZoom(#{gmBean.zoom});
}
</script>
</a4j:outputPanel>
<a4j:outputPanel>
<script>
function createPoints(data) {
//alert(data.length);
for (var i = 0; data.length; i++) {
var point = new GLatLng(data[i].lat, data[i].lng);
map.setZoom("10");
map.addOverlay(createMarkerWithIdentifier(point, data[i].desc));
}
}
function createMarkerWithIdentifier(point, desc) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});
return marker;
}
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function showExadel(data) {
var lat=data.lat;
var lng=data.lng;
var zoom=data.zoom;
//alert(lat+"--"+lng);
var point = new GLatLng(lat, lng);
map.setCenter(point);
map.clearOverlays();
var pic='#{facesContext.externalContext.request.contextPath}'+data.pic;
var picStar='#{facesContext.externalContext.request.contextPath}'+'/images/gmap/star1.jpeg';
var name=data.name;
var num=data.ratings;
var msg = '';
var i=0;
for (i=1;i <=data.ratings;i++)
{
msg = msg + '<img src="'+picStar+'" width="10" height="10" alt="'+data.ratings+'"/>' + '\n';
}
var html='Go to the <a target="_blank" href="http://www.exadel.com">Exadle Web Site</a>';
var html3='<img src="#{facesContext.externalContext.request.contextPath}/images/gmap/index.jpeg" width="200" height="100" />';
var marker = createMarker(point,html2);
map.setZoom(zoom);
map.addOverlay(marker);
}
function setCenter(lag, lat, zoom) {
map.setCenter(new GLatLng(lag, lat), zoom);
var ulp = new GPoint(lag,lat);
var ul = G_NORMAL_MAP.getProjection().fromPixelToLatLng(ulp,zoom);
}
</script>
</a4j:outputPanel>
</ui:composition>
-
4. Re: googlemap functionality not working properly inside panelgrid
Hi All,
It wont work inside panelgrid but when u take it outside <a4j:form >then gmap will be rendered properly.