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.
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.