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

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

    Carlos Prieto Newbie

      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
          Nick Belaevski Master

          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
            Carlos Prieto Newbie

            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
              saket Gupta Newbie

              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
                saket Gupta Newbie

                Hi,

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

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

                  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 Master
                    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
                      saket Gupta Newbie

                      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>