Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    vgribok is on a distinguished road

      0  

    Default Google Maps is not rendering properly after changing the device Orientation

    Google Maps is not rendering properly after changing the device Orientation


    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.

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    1
    mikeycgto is on a distinguished road

      0  

    Default


    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:

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

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    eboyer is on a distinguished road

      0  

    Default Worked for me.

    Worked for me.


    I have a geocoder callback that I put the

    PHP Code:
    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:
    PHP Code:
    parent.on('activate', function(component){
                    
    google.maps.event.trigger(component.googleMap.map'resize');
                }); 

  4. #4
    Touch Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    vgribok is on a distinguished road

      0  

    Default


    Thanks a lot eboyer. This actually works. I hope sencha team have fixed this issue in their latest version.

    Quote Originally Posted by eboyer View Post
    I have a geocoder callback that I put the

    PHP Code:
    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:
    PHP Code:
    parent.on('activate', function(component){
                    
    google.maps.event.trigger(component.googleMap.map'resize');
                }); 

Similar Threads

  1. NestedList not rendering properly, fixes upon orientation change
    By dchan in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 26 Apr 2011, 10:38 PM
  2. NestedList not rendering properly, fixes upon orientation change
    By dchan in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 8 Mar 2011, 2:54 PM
  3. Rendering Google MAPS in GXT
    By eburgerwa in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 28 Dec 2010, 9:59 AM

Thread Participants: 2

Tags for this Thread