4 Replies Latest reply on Jun 3, 2011 5:56 AM by Ajit Singh

    googlemap functionality not working properly inside panelgrid

    Ajit Singh Newbie

      Hi All,

               I have to display google map in a hotel search page.so i have the code to display search results for hotel. Now i have to also  implement a functionality to display hotels in google map. I have the googleMap.xhtml code which is working perfectly fine when i run it individually. But i have to integrate the same code in searchresult page so for that I am including googleMap.xhtml page. Now the google map is being displayed but all functionalities are not working properly ..like when i click on hotel images which are coming from  bean then  information about these hotels are not being displayed on google map. Is there any other way to use google map functionality in richfaces?

       

      <h:panelGrid id="test2" rendered="#{hotelSearchResultsBean.renderGmap}"  style="float:right;margin-top:10px;">

               

                   <ui:include src="/pages/hotel/include/googleMap.xhtml" />

                  

          </h:panelGrid>

        • 1. Re: googlemap functionality not working properly inside panelgrid
          Ilya Shaikovsky Master

          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
            Ajit Singh Newbie

            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
              Ajit Singh Newbie

              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 &lt;=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
                Ajit Singh Newbie

                Hi All,

                              It wont work inside panelgrid but when u take it outside <a4j:form >then gmap will be rendered properly.