7 Replies Latest reply on May 18, 2010 1:07 PM by saket80

    rich:gmap inside modalPanel fine in IE7, but quarter-rendere

    cprietom

      Hi,

      I'm having problems with the rich:gmap component inside a rich:modalPanel.
      Everything goes perfect in IE7. But in FF3 and Google Chrome, when the modalPanel is opened, it is rendered only the top-left quarter of the gmap, and the other 3/4 keep gray. However, once the modalPanel is visible, if I resize the browser (by minimizing, maximizing, or enlarging/stretching it) the map is repainted and everything appears perfect. And from that moment, the map works perfect whatever I make to the browser or modalpanel.

      I've fixed it on FF3 by placing a window.resizeTo() in the onshow event of the modalPanel, but the resizeTo method doesn't work on Chrome.

      It's quite paradoxical that the gmap has problems in Chrome and not in IE, isn't it? Has anybody experienced something similar? Do you have any idea how could I fix it? I don't know more ways of telling the browser to repaint the window.

      Thanks in advance,
      Carlos.

        • 1. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren
          nbelaevski

          Hello,

          I was experiencing the same issue with rich:virtualEarth. There's a special method there to call if size was changed, I've called it and it worked ok. Don't know whether there's such method in GMap API, you can search...

          • 2. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren
            cprietom

            You got it. Thank you very much nbelaevski. Calling gmap.checkResize() in the onshow event of the modalPanel fixed it.

            • 3. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren

              Hi,

              rich gmap is not rendering in model panel with Safari, any fix for this? below is my code

               

              <rich:modalPanel id="storeLocationMapOverlay"  autosized="true" top="100" onshow="map.checkResize()"  >
                               <div>  <h:outputText value="Store Location Map"/></div>
                              <f:facet name="controls">
                                  <h:graphicImage value="../content/images/closebox.png" onclick="Richfaces.hideModalPanel('storeLocationMapOverlay')"/>
                              </f:facet>
                               <h:form id="storeMapForm">
                                       <h:panelGrid id="mapGrid" styleClass="overlayPanel width500">
                                 
                                       <rich:gmap  gmapVar="map" mapType="G_NORMAL_MAP" enableDragging="true" zoom="2"
                                           style="width: 500px; height: 400px;"   showGMapTypeControl="false"
                                           gmapKey="ABQIAAAARGLSjsbAhg4dYB1UWUa5RxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS_VJNFb4_Hg1PQG5eR_u6y_bKo5w"
                                            oninit="loadMap()">
                                           <script type="text/javascript">
                                              function loadMap(){
                                                  var center = new GLatLng('#{storeController.storeBean.gpsX}', '#{storeController.storeBean.gpsY}');
                                                  map.setCenter(center, 13);

               

                                                  var marker = new GMarker(center, {draggable: true});

               

                                                  GEvent.addListener(marker, "dragstart", function() {
                                                    map.closeInfoWindow();
                                                    });

               

                                                  GEvent.addListener(marker, "dragend", function() {
                                                    marker.openInfoWindowHtml("Just bouncing along...");
                                                    });

               

                                                  map.addOverlay(marker);
                                          }
                                            </script>
                                            </rich:gmap>

              • 4. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren

                Hi,

                I did not get any response on my issue. please help

                • 5. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren

                  Hi,

                   

                  CommandLinks does not work in my application if i add the <f:view contentType="text/html">,  none of the link event works if i add view contentType.

                  Please help

                   

                  Thanks

                  • 6. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren
                    ilya_shaikovsky
                    CommandLinks does not work in my application if i add the <f:view contentType="text/html">,  none of the link event works if i add view contentType.

                    do you able to provide war sample for that? It work normally in our test apps.

                    • 7. Re: rich:gmap inside modalPanel fine in IE7, but quarter-ren

                      Hi Ilya,

                       

                      Here is my code with command Links with contentType text/html

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html 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">
                          <body>
                              <ui:composition>
                                  <f:view contentType="text/html">
                                  <h:form id="sidePanelForm">
                                      <div id="master">
                                          <ul>
                                              <div>
                                                  <h:outputLabel value="#{msg.STORE_LAYOUT_STORE_DETAILS}" />
                                              </div>
                                              <li id="li_store">
                                                  <div><h:commandLink value="#{msg.STORE_LAYOUT_BASELINE_INFO}" action="#{storeController.toStoreDetailPage}" id="queue_0" /></div>
                                              </li>
                                              <f:subview  rendered="#{storeController.hasProgram('APR')}">
                                              <li id="li_apr">
                                                  <div><h:commandLink value="#{msg.STORE_LAYOUT_APPLE_APR}" action="#{storeController.toAprStoreProgram}" rendered="#{stateController.storeDetailsFlag}" id="queue_1" /></div>
                                              </li>
                                              </f:subview>
                             </h:form>
                                  </f:view>
                              </ui:composition>
                          </body>
                      </html>