1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    0
    Jversloot is on a distinguished road

      0  

    Default Unanswered: Google maps android

    Unanswered: Google maps android


    Dear,


    I'm struggling with the google maps part of sencha. I managed to get it fully functional on iOS and safari but on Android maps just won't load. I was wondering if someone can help me with this problem?


    My menu contains the following item:
    Code:
    {   title: 'MAPS',
    iconCls: 'organize',
    cls: 'maps',
    xtype: 'map',
    scroll: false,
    useCurrentLocation: true,
    id: 'googleMaps',
    mapOptions: {
    zoom: 17,
    navigationControl: true
    },
    listeners: {
    maprender: function(comp, maps){
     alert("mapRender");
     maps.setMapTypeId(google.maps.MapTypeId.HYBRID);
     var infowindow = new google.maps.InfoWindow({ content: 'Infowindow' });
     var p = new google.maps.LatLng(52.138583, 5.420488);
     var marker = new google.maps.Marker({ map : maps, position : p });
     google.maps.event.addListener(marker, 'click', function() { infowindow.open(maps, marker); });
    }
    }
    },

    and my html contains:
    HTML Code:
    <!DOCTYPE HTML><html>
    <head>
        <title>PhoneGap</title>
        <script>window.onerror = function(error) { alert(error); };</script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="cordova-1.5.0.js"></script>
    
    
    
    
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
        <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/menu.js"></script>
           
    </head>
    <body>
    </body>
    </html>

    This all works fine on iOS but it seems to do nothing at all in Android.
    It just shows the default background color above the menu and nothing is loading. (Just like loading it using Chrome btw)


    Can someone please help me? I'am stuck!

    UPDATE: Changing useCurrentLocation from true to false helped a bit! The map is now showing but its of course not using the location. How can I fix this?


    Kind regards,
    Jaap

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3453
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sounds like there is an error happening with the Ext.util.Geolocation class. Can you test this on your setup?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    0
    Jversloot is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Sounds like there is an error happening with the Ext.util.Geolocation class. Can you test this on your setup?
    I just used:
    Code:
    geo = new Ext.util.GeoLocation({accuracy: 1,
    autoUpdate: true,
    listeners: {
    locationupdate: function (geo) {
    alert("ALL OK");
    currentLat = geo.latitude;
    currentLng = geo.longitude;
    currentLocation = new google.maps.LatLng(geo.latitude, geo.longitude);
    },
    locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
    alert("geo:"+geo+" bTimeout:"+bTimeout+" bPermissionDenied:"+bPermissionDenied+" bLocationUnavailable:"+bLocationUnavailable+" message:"+message);
    }
    }
    });
    geo.updateLocation();
    to test and i got the following alert on the emulator (4.0.3):

    geo:[object Object] bTimeout: false bOermissionDenied:false bLocationUnavailable:true message:Failed to start Geolocation service

    //It seems to be impossible to run this on my device (2.1).

    EDIT/UPDATE: on the divice it just alerts ALL OK...

    UPDATE 2: When I uncomment the code:
    HTML Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    the cellphone responces:
    The connectiuon to the server was unsuccessful. (file:///android_asset/www/index.html)



    Thanks for your reply!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3453
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Permission denied either means the user didn't give permission to use GPS or the device is blocking it, more likely the user didn't give permission.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    0
    Jversloot is on a distinguished road

      0  

    Default


    That's only in the emulator. The device is responding ALL OK. But when I add the line:
    HTML Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    the cellphone responds:
    The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

    (See updates on the post above)

    My phonegap.xml (in my case cordova) looks like this:
    Code:
    <?xmlversion="1.0"encoding="utf-8"?><cordova>
    <accessorigin="http://127.0.0.1*"/>
    <accessorigin="http://maps.google.com*"/>
    <accessorigin="http://maps.gstatic.com*"/>
    <accessorigin="http://maps.googleapis.com*"/>
    <accessorigin="*.google.com"/>
    <accessorigin="*.gstatic.com"/>
    <accessorigin="*.googleapis.com"/>
    <accessorigin="http://*.google.com"/>
    <accessorigin="http://*.gstatic.com"/>
    <accessorigin="http://*.googleapis.com"/>
    <accessorigin="http://*.phonegap.com"/>
    <accessorigin="http://www.phonegap.com*"/>
    <accessorigin="http://maps.google.com/maps/api/*"/>
        <access origin="*"/>
    <loglevel="DEBUG"/>
    </cordova>
    
    
    so I suppose it should pass the blocking?

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    0
    Jversloot is on a distinguished road

      0  

    Default


    Hi all,

    My problem is still existing. However I managed to run the app on the android device now with a different approach. Previously the entire menu was loaded at once, this includes the map tabPanel item. Now I removed the loading of the google maps api from the index.html and added the following lines to the menu.js

    Code:
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=loadMenu";
    script.type = "text/javascript";
    
    //UNCOMMENT THE LINE BELOW AND EVERYTHING WILL WORK FINE IN IOS AND SAFARI.
    //UNCOMMENT THE LINE BELOW AND IT WILL BREAK THE ANDROID APP!: error: "the connection to the server was unsuccessful. (file:///android_asset/www/index.html)"
    //document.getElementsByTagName("head")[0].appendChild(script);
    
    function loadMenu()
    {
       alert("maps loaded");
       tabPanel.add(
       {   
        title: 'Acties',
        iconCls: 'organize',
        cls: 'maps',
        xtype: 'map',
        scroll: false,
        useCurrentLocation: false,
        id: 'googleMaps',
        mapOptions: {
           zoom: 17,
           navigationControl: false,
           streetViewControl: false,
           mapTypeControl: false,
           center : new google.maps.LatLng(52.138583,5.420488)
        },
        listeners: {
           maprender: function(comp, maps){
              alert("mapRender");
              maps.setMapTypeId(google.maps.MapTypeId.HYBRID);
              var infowindow = new google.maps.InfoWindow({ content: 'Jaap & Nicky where here' });
    
              var p = new google.maps.LatLng(52.138583, 5.420488);
              var marker = new google.maps.Marker({ map : maps, position : p });
             google.maps.event.addListener(marker, 'click', function() { infowindow.open(maps, marker); });
            }
          }
        }
    );
    
    }
    If I comment the line:
    Code:
    document.getElementsByTagName("head")[0].appendChild(script);
    the app will run on all devices but it logicaly does not have any maps functionality.
    If i uncomment the line it will produce : "the connection to the server was unsuccessful. (file:///android_asset/www/index.html)" on android but it keeps working on iOS and Safari.

    The weard thing is it does work in the emulator..

    Can anyone help me?

    EDIT:
    The code seems to work on a 4.0.2 device! Thanks for helping!
    Last question: Can anyone explane to me why it does work on 4.0.2 and it does not on 2.2?
    Last edited by Jversloot; 21 Mar 2012 at 6:14 AM. Reason: Made the code more readable

Thread Participants: 1

Tags for this Thread