ICEfaces
  1. ICEfaces
  2. ICE-9243

ace:gMap, map frame is mostly gray when inside dialogs and other containers

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 3.3
    • Fix Version/s: EE-3.3.0.GA, 4.0.BETA, 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Any

      Description

      For instance, when an ace:gMap is inside an ace:dialog, and the dialog pops up for the first time, the map might look right, but if the dialog is closed and opened again, most of the map frame will be gray. This also happens when the map is in an ace:tabSet, and other containers.

        Activity

        Hide
        Arturo Zambrano added a comment - - edited

        This is not exclusive to ace components nor ICEfaces in general, it happens with any container with that is made visible/invisible and has specific dimensions. It also happens when resizing the viewport or the container where the map is.

        The gmap reference instructs developers to call google.maps.event.trigger(map, 'resize') whenever the window or container is resized (https://developers.google.com/maps/documentation/javascript/reference#Map under Events). I tested this, and it does fix the problem. The only issue is that this has to be called from the component that contains the map, for example an ace:dialog. So, we have three options.

        1. Modify all our container components to be aware of ace:gMap children and make them call the resize function whenever they are opened or resized.
        2. Add a polling function to the ace:gMap component itself that detects a change form visible to invisible and then calls this resize function. There are no DOM or jQuery events to detect when an element went from invisible to visible, so a polling function that runs continuously would be needed.
        3. Simply call the resize function onmouseover on the ace:gMap, so that when the user sees the map is gray and intuitively mouses over, the resize function is called and the map looks right again.

        Show
        Arturo Zambrano added a comment - - edited This is not exclusive to ace components nor ICEfaces in general, it happens with any container with that is made visible/invisible and has specific dimensions. It also happens when resizing the viewport or the container where the map is. The gmap reference instructs developers to call google.maps.event.trigger(map, 'resize') whenever the window or container is resized ( https://developers.google.com/maps/documentation/javascript/reference#Map under Events). I tested this, and it does fix the problem. The only issue is that this has to be called from the component that contains the map, for example an ace:dialog. So, we have three options. 1. Modify all our container components to be aware of ace:gMap children and make them call the resize function whenever they are opened or resized. 2. Add a polling function to the ace:gMap component itself that detects a change form visible to invisible and then calls this resize function. There are no DOM or jQuery events to detect when an element went from invisible to visible, so a polling function that runs continuously would be needed. 3. Simply call the resize function onmouseover on the ace:gMap, so that when the user sees the map is gray and intuitively mouses over, the resize function is called and the map looks right again.
        Hide
        Arturo Zambrano added a comment -

        Committed fix at revision 34910. Fixed by adding polling function that detects changes from visible to invisible in the map div and then calls the resize function to correct the map.

        Show
        Arturo Zambrano added a comment - Committed fix at revision 34910. Fixed by adding polling function that detects changes from visible to invisible in the map div and then calls the resize function to correct the map.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: