Map is not clickable or scrollable with sencha touch

[AhmedAdlyAli]

After adding the map to sencha touch application, it's disaplyed correctly, however it's not clickable or dragable, it seems it's hidden behind sencha app, here is my code:

// initialize google maps var view = component;

var pnlMap = view.down('#pnlMap');

Ext.Function.defer(function(){

var map = plugin.google.maps.Map.getMap(pnlMap.element.dom);

map.getMyLocation(function(location){

    //map.setMyLocationEnabled(true);

    // alert(location.latLng.lat);

    //map.setCenter(location.latLng);

    map.animateCamera({
        'target': location.latLng,
        'tilt': 60,
        'zoom': 8,
        'bearing': 140
    });

}, function(){

    alert("error: " + msg);

});

// get dealers

var url = ...

var requestData =  ...

Ext.AnimationHelper.ShowLoading();

Ext.Ajax.request({

    url : url,
    method : 'POST',
    jsonData :requestData,
    success : function (response) {

        var json1 = Ext.util.JSON.decode(response.responseText);
        var json2 = Ext.util.JSON.decode(json1.d);

        Ext.AnimationHelper.HideLoading();

        // add markers

        map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

            map.addMarker({
                'position': new plugin.google.maps.LatLng(25.3033825, 51.5092886),
                'title': "...",
                'snippet': "...",
                animation: plugin.google.maps.Animation.DROP
            }, function(marker) {

                marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
                    alert("Marker is clicked");
                });

            });

        });

    },
    failure: function(request, resp) {
        alert("in failure");
    }
});

}, 100,this);

[AhmedAdlyAli]

im trying on IOS 8.3 BTW

[Luukschoen]

Maybe it helps to set mapsetclickable to true? https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Map#mapsetclickable

[AhmedAdlyAli]

Hi Luukschoen, tried that but still the same issue

[Luukschoen]

@AhmedAdlyAli could you provide a full working demo somewhere so i could help you figure this one out?

[AhmedAdlyAli]

Sure, will send a drop box in a minute

[AhmedAdlyAli]

@Luukschoen i can't post the whole project due to it's size, can we have a skype chat ?

[jaredgreener]

Just for reference - The way I got around this whole issue with Sencha touch and the "Nesting from hell". was by using these two functions:

function showNativeMap(){

if(!useNativeMap){
    return false;
}

inMap = true;

document.getElementById('nativeMapWrapper').style.display = 'block';
document.getElementById('ext-viewport').style.display = 'none';

}

function hideNativeMap(showMenu){

if(!useNativeMap){
    return false;
}
inMap = false;
document.getElementById('ext-viewport').style.display = 'block';
document.getElementById('nativeMapWrapper').style.display = 'none';

}

Then I just created a wrapper element called: "nativeMapWrapper" that was positioned absolutely with 100% width and height and top: 0; left: 0; The nativeMapWrapper is hidden by default and then just toggles between sencha and the nativeMapWrapper.

[hirbod]

Thanks for letting us know!

[sonyisda1]

I am experiencing this same issue with SenchaTouch2. But it seems that the solution presented by @jaredgreener was essentially to display the plugin to a sibling of the App (toggling full screen).

Has anyone had luck with getting the plugin to run (clickable, scrollable) within of a Sencha container/panel?