PDA

View Full Version : Google Maps is not rendering properly after changing the device Orientation



vgribok
22 Mar 2011, 12:35 PM
Sencha Touch version tested:

1.0.2


only default ext-all.css




Platform tested against:

iOS 4


Summary: Using Sencha Touch 1.0.2, Safari Browser on iPad and iPad2. Same behavior observed with 1.0.1a.


Description:

In my web page I have two screens one contains a list and a Google map, other screen contains a list and google maps with directions. First screen shows the customer locations in the google maps and second screen shows the Driving directions for that customer. Everything works fine until I change the device orientation. After I change the device orientation map will display/render properly in the current screen, but if I navigate to other screen, the map in that screen will not render properly. Basically it doesn't occupy the whole space given for the maps.



Steps to reproduce the problem:

1. Create a web page with two screens, one containing two panels, first one with a list and a Google Map control
2. Create second screen with anything. Just create a panel with a ability to go back to previous screen
3. Browse to the web page in iPad [1.0/2.0] in Landscape mode.
4. Navigate from first screen to second screen. Now change the device orientation from Landscape to Portrait and change it again back to Landscape.
5. Go back to first screen now, and you would see the Google maps is not occupying the complete space allotted to it.


The result that was expected:

Google maps should always consume all the space allotted to it and it should render properly


The result that occurs instead:

Google maps is not consuming all the space allotted to it and it should display in the same way it displayed when we first visited the page


Screenshot or Video:



Debugging already done:

none


Possible fix:

none.

mikeycgto
24 Mar 2011, 6:54 AM
From your screenshots, it looks like Google maps itself is not resizing correctly. There is a event that must be triggered through the Google Maps API (v3) to get the map to resize (this will come up outside of sencha touch as well). It seems the sencha-touch map class is attempting to do so with the following code:



monitorResize : true,

...

onResize : function( w, h) {
Ext.Map.superclass.onResize.apply(this, arguments);
if (this.map) {
google.maps.event.trigger(this.map, 'resize');
}
},


But it's failing to do so for some reason...

eboyer
25 Mar 2011, 1:22 PM
I have a geocoder callback that I put the


google.maps.event.trigger(component.googleMap.map, 'resize');

line into and it worked. If you center the map, you have to resize before hand, otherwise the map will end up out of place.

You could also do something like:

parent.on('activate', function(component){
google.maps.event.trigger(component.googleMap.map, 'resize');
});

vgribok
28 Mar 2011, 12:12 PM
Thanks a lot eboyer. This actually works. I hope sencha team have fixed this issue in their latest version.


I have a geocoder callback that I put the


google.maps.event.trigger(component.googleMap.map, 'resize');

line into and it worked. If you center the map, you have to resize before hand, otherwise the map will end up out of place.

You could also do something like:

parent.on('activate', function(component){
google.maps.event.trigger(component.googleMap.map, 'resize');
});