Gesture on Nexus 7 Table - Chrome Issue

Question

I just got a new Google Nexus 7 tablet and have been testing my map.   This device comes with a default Chrome browser.    It does not recognize any of my gestures (pan, pinch, etc) on the map (I using the 3.2 API) in Chrome.    I installed FireFox and it works so its not specific to the Nexus 7 table, but rather Chrome.    Is there a setting in Chrome or the API to fix this?

GregoryDillon · Answer

As an update to this thread, sometime in December 2013 Chrome got fixed and can now handle my map.

GregoryDillon · Answer

I have been hoping that Chrome would be fixed this by now on the Nexus 7 (and now they are releasing a new Nexus 7!).    It appears as I mentioned earlier Chrome just can handle alot of layers (ie.  Map Web services).

Does anybody have a workaround for this?

Has anybody else seen this behavior?

My site works fine on the FireFox, the native phone browser, Dolphin, basically anything but Chrome on the Nexus 7.    Chrome also fails on my Motorola Razr.   I suspect Chrome on any mobile device fails.   The PC version of Chrome works fine using the mouse (I have not tested on a touch screen).    I also have the site working with IE9 and IE10 on a PC.

GregoryDillon · Answer

Yes.   Sorry I'm finally get back to this thread.    I got the orientation to work in Firefox.

Here is my code for anybody interested:

if (MobileDevice == "ANDROID" && MobileDeviceBrowser == "FIREFOX") {
        window.addEventListener("deviceorientation", handleOrientation, true);
    }

function handleOrientation(orientData) {
    var absolute = orientData.absolute;
    var alpha = orientData.alpha;
    var beta = orientData.beta;
    var gamma = orientData.gamma;
    // Do stuff with the new orientation data
    if (screen.width > screen.height) {
        CurrentOrientation = 'Landscape';
    } else {
        CurrentOrientation = 'Portrait';
    }

if (OldOrientation != CurrentOrientation) {
        RepositionAndResizeMap();
    }

OldOrientation = CurrentOrientation;
}

function RepositionAndResizeMap() {
    SetWindowOrientation();

if (MobileDevice == "ANDROID") {

setTimeout('FixAndroidMenuBar();', 500);
    } else {
        RepositionAndResizeMapPart2();
    }
}

function SetWindowOrientation() {
    if (MobileDevice != "ANDROID" || MobileDeviceBrowser != "FIREFOX") {
        if (window.orientation == 90 || window.orientation == -90) {
            CurrentOrientation = 'Landscape';
        } else {
            CurrentOrientation = 'Portrait';
        }
    }

}

function RepositionAndResizeMapPart2() {

if (map) {

var MapDiv = document.getElementById('map');

MapDiv.style.top = "0px";
        MapDiv.style.left = "0px";
        MapDiv.style.width = "100%";
        MapDiv.style.height = "100%";

map.reposition();
        TryMapResize();

}

AdjustProgressWindow();
}

function AdjustProgressWindow() {

var CalcWidth = screen.width;
    var CalcHeight = screen.height;

if (MobileDevice == "WINDOWS") {
        CalcWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth;
        CalcHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22);

} else {

if (CurrentOrientation == 'Landscape') {
            if (CalcWidth < CalcHeight) {
                CalcWidth = screen.height;
                CalcHeight = screen.width;
            }
        } else {
            if (CalcWidth > CalcHeight) {
                CalcWidth = screen.height;
                CalcHeight = screen.width;
            }
        }
    }

var CenterX = CalcWidth / 2;
    var CenterY = CalcHeight / 2;

var OffsetY = 170;
    var OffsetX = 120;

if (CurrentOrientation == 'Landscape') {

if (MobileDevice == "ANDROID") {
            if (MobileDeviceVersion > "4") {
                OffsetY = 200;
                OffsetX = 230;
            } else {
                OffsetY = 130;
                OffsetX = 60;
            }
        } else if (MobileDevice == "IPOD" || MobileDevice == "IPHONE") {
            OffsetY = 110;
            OffsetX = 75;
        }
    } else {
        if (MobileDevice == "ANDROID") {

if (MobileDeviceVersion > "4") {
                OffsetY = 320;
                OffsetX = 185;
            } else {
                OffsetY = 170;
                OffsetX = 60;
            }
        } else if (MobileDevice == "IPOD" || MobileDevice == "IPHONE") {
            OffsetY = 110;
            OffsetX = 70;
        }
    }

var Progress = document.getElementById(ProgressWindow);

if (Progress != null) {
        Progress.style.top = CenterY - OffsetY + "px";
        Progress.style.left = CenterX - OffsetX + "px";
    }
}