1 2 Previous Next 22 Replies Latest reply on May 15, 2010 3:04 AM by ilya_shaikovsky

    Using gmap inside modalpanel NOT working porperly

    polac
    polac Oct 26, 2007 9:23 AM

      Hi,

      I'm using rich:gmap component inside rich:modalpanel component. Problem is that the google map doesn't load it's map correctly. Map type buttons, zoom sliders, navigation buttons and ad banners at the bottom renders them self correctly. The problem is that the actual map is only partly visible in the top left corner of the google maps area.

      Hopefully someone has used gmap inside modalpanel and could kindly give me a hint how one gets it working.

      Thank you!

      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

<html>
 <head>
 <title>just testing</title>
 </head>
 <body>
 <p>
 <a href="javascript:Richfaces.showModalPanel('paneeli')">POPUP</a>
 </p>
 <f:view>
 <rich:modalPanel
 id="paneeli"
 height="500"
 width="500"
 minHeight="500"
 minWidth="500">
 <f:facet name="header">
 <h:outputText value="Last known location"> </h:outputText>
 </f:facet>
 <f:facet name="controls">
 <f:verbatim>
 <a href="javascript:Richfaces.hideModalPanel('paneeli')">X</a>
 </f:verbatim>
 </f:facet>
 <rich:gmap
 id="gmappi"
 gmapVar="mappi"
 gmapKey="map.key"
 style="width:480px;height:460px;"
 lat="48.44"
 lng="2.24"
 zoom="5"
 />
 </rich:modalPanel>

 </f:view>
 </body>
 </html>


      • 25232 Views
      • Tags:
        • 1. Re: Using gmap inside modalpanel NOT working porperly
          sandromancuso
          sandromancuso Nov 7, 2007 5:59 AM (in response to polac)

          I'm also using google map inside the modalpanel and having the same issues. Also, when I try to zoom in or out and drag the map, the map is not loaded properly. The impression that I have is that the map is being rendered a bit off of the defined boundaries of the gmap component.

          Another thing that I noticed is that if I try to centralise a point using the map.setCenter(), the point appears at the top-left corner instead of in the centre.

          <h:commandLink id="cmlResultLocation" onclick='map.setCenter(new GLatLng("#{region.latitude}","#{region.longitude}"),12)' value="#{region.description}"/>


          My map component is being defined as: 

          <rich:gmap gmapVar="map" zoom="12" mapType="G_NORMAL_MAP" style="width:350px;height:350px" gmapKey="#{map.key}" />


          Any help would be appreciated.

          Thanks.

          Sandro Mancuso

            • Actions
          • 2. Re: Using gmap inside modalpanel NOT working porperly
            sandromancuso
            sandromancuso Nov 7, 2007 6:02 AM (in response to polac)

            Btw, I'm using Mozila Firefox version 2.0.0.9.

              • Actions
            • 3. Re: Using gmap inside modalpanel NOT working porperly
              polac
              polac Nov 7, 2007 8:17 AM (in response to polac)

               

              "sandromancuso" wrote:
              I'm also using google map inside the modalpanel and having the same issues. Also, when I try to zoom in or out and drag the map, the map is not loaded properly. The impression that I have is that the map is being rendered a bit off of the defined boundaries of the gmap component.

              Another thing that I noticed is that if I try to centralise a point using the map.setCenter(), the point appears at the top-left corner instead of in the centre.


              Yep. Same kind of issues here. Hopefully, someone has a solution for this problem.

                • Actions
              • 4. Re: Using gmap inside modalpanel NOT working porperly
                demetrio812
                demetrio812 Nov 20, 2007 12:59 PM (in response to polac)

                I found the same problem on IE 7 and on Firefox 2.0.0.9...


                demetrio

                  • Actions
                • 5. Re: Using gmap inside modalpanel NOT working porperly
                  sergeysmirnov Nov 20, 2007 1:02 PM (in response to polac)

                  did someone try to incorporate the gmap itself (instead of rich:gmap) into modal panel?

                    • Actions
                  • 6. Re: Using gmap inside modalpanel NOT working porperly
                    polac
                    polac Nov 21, 2007 2:09 AM (in response to polac)

                     

                    "SergeySmirnov" wrote:
                    did someone try to incorporate the gmap itself (instead of rich:gmap) into modal panel?


                    Good idea but unfortunately it doesn't work. Same kind of problems then with the rich:gmap. So maybe the problem isn't in rich:gmap.

                    Here is the code I tested it with. 

                    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

<html>
 <head>
 <script src="http://maps.google.com/maps?file=api&v=2&key=yourKey" type="text/javascript"></script>
 <script type="text/javascript">

 function load() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng( 61.4796,21.8039), 6);
 }
 }


 </script>
 <title>just testing</title>
 </head>
 <body onload="load()">
 <p>
 <a href="javascript:Richfaces.showModalPanel('paneeli')">POPUP</a>
 </p>
 <f:view>
 <rich:modalPanel
 id="paneeli"
 height="500"
 width="500"
 minHeight="500"
 minWidth="500">
 <f:facet name="header">
 <h:outputText value="Last known location"> </h:outputText>
 </f:facet>
 <f:facet name="controls">
 <f:verbatim>
 <a href="javascript:Richfaces.hideModalPanel('paneeli')">X</a>
 </f:verbatim>
 </f:facet>
 <f:verbatim>
 <div id="map" style="width: 450px; height: 450px"></div>
 </f:verbatim>
 </rich:modalPanel>

 </f:view>
 </body>
 </html>


                      • Actions
                    • 7. Re: Using gmap inside modalpanel NOT working porperly
                      jonckvanderkogel
                      jonckvanderkogel Jan 10, 2008 10:21 AM (in response to polac)

                      Just to give this thread a bump, I've tried every possible variation of trying to get either a Google Map or Virtual Earth component inside a modal panel but was unable to. In both cases I would build the most basic example that works on a regular page and then place exactly the same code inside a modal panel, which then always failed.

                      If someone has some working code of a Gmap/Virtual Earth map inside a modal panel please post it here.

                      Kind regards, Jonck

                        • Actions
                      • 8. Re: Using gmap inside modalpanel NOT working porperly
                        fmarwede Jan 10, 2008 10:41 AM (in response to polac)

                        I tried it with the new ajax compliant gmap but the same happens what is described in the first post: I see a part of the map in a corner but it's really really unusable.

                          • Actions
                        • 9. Re: Using gmap inside modalpanel NOT working porperly
                          sergeysmirnov Jan 10, 2008 11:34 AM (in response to polac)

                          what the browser?

                            • Actions
                          • 10. Re: Using gmap inside modalpanel NOT working porperly
                            fmarwede Jan 10, 2008 11:56 AM (in response to polac)

                            In my case it's FF 2.0

                              • Actions
                            • 11. Re: Using gmap inside modalpanel NOT working porperly
                              leiras Apr 23, 2008 7:41 PM (in response to polac)

                              I got the same problem using FF 2.0.0.14 and IE 7.0. Is there a solution for this?

                                • Actions
                              • 12. Re: Using gmap inside modalpanel NOT working porperly
                                leiras Apr 24, 2008 8:23 AM (in response to polac)

                                Is this a bug on modalPanel?

                                  • Actions
                                • 13. Re: Using gmap inside modalpanel NOT working porperly
                                  sergeysmirnov Apr 24, 2008 11:01 AM (in response to polac)

                                  it is a feature of Google Map - http://www.nczonline.net/blog/2006/3/27/google_maps_api_no_xhtml_support

                                    • Actions
                                  • 14. Re: Using gmap inside modalpanel NOT working porperly
                                    cprietom
                                    cprietom Feb 22, 2009 10:50 AM (in response to polac)

                                    Exactly the same happened to me, and I managed to fix it halfway playing with the values of the "lat" and "long" attributes of the rich:gmap tag. In my case, what I needed was the whole map of the world (that is zoom="1") in a 550x400 gmap canvas (style="width:550px; height: 400px;") with zooming disabled inside a modalpanel. This code worked for me:

                                    <rich:gmap gmapVar="gmap" id="map"
 lat="83" lng="-178" zoom="1" mapType="G_NORMAL_MAP" style="width: 550px; height: 400px;"
 enableDragging="false" enableContinuousZoom="false" enableDoubleClickZoom="false"
 showGLargeMapControl="false" showGMapTypeControl="false" showGScaleControl="false" />


                                    The problem might be in the way the GMap2 javascript object centers the map inside the divs of the modalpanel, because I tried to place the rich:gmap tag inside a very simple modalpanel developed by me with my own CSS and divs (not using the rich:modalpanel tag) and the results were the same.

                                    Hope it helps someone.

                                      • Actions
                                    1 2 Previous Next