Results 1 to 3 of 3

Thread: Google Maps - not scrolling on android ?

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190

    Default Google Maps - not scrolling on android ?

    Hello Everyone,

    I have the following mappanel (sorry i post all my code, 2 reasons, first reason is that I don't know if i am doing something wrong or if it is a bug, so i post everything to make sure if i make an error you boys can find it, 2nd is that the code can be used by other people who want to use map).

    Code:
    // MapPanel
    		var image = new google.maps.MarkerImage(
    			'/icamsbase/mobile/img/point.png',
    			new google.maps.Size(32, 31),
    			new google.maps.Point(0,0),
    			new google.maps.Point(16, 31)
            );
                
    		var shadow = new google.maps.MarkerImage(
    			'/icamsbase/mobile/img/shadow.png',
    			new google.maps.Size(64, 52),
    			new google.maps.Point(0,0),
    			new google.maps.Point(-5, 42)
            ); 
            
    		var pointer_deloitte1 = new google.maps.MarkerImage(
    			'/icamsbase/mobile/img/pointer_white.png',
    			new google.maps.Size(32, 31),
    			new google.maps.Point(0,0),
    			new google.maps.Point(16, 31)
            );
            
            var pointer_deloitte2 = new google.maps.MarkerImage(
    			'/icamsbase/mobile/img/pointer_blue.png',
    			new google.maps.Size(32, 31),
    			new google.maps.Point(0,0),
    			new google.maps.Point(16, 31)
            );
    
            icams.mapPanel = new Ext.Panel({
                id: 'mapPanel',
                name: 'mapPanel',
                title: 'Kaart',
                dockedItems: [bottomTB, topTB],
                items: [
                {
                    xtype: 'map',
                    id: 'map1',
                    name: 'map1',
                    useCurrentLocation: true,
                    mapOptions: {
                        navigationControl: false,
                        streetViewControl: false,
                        mapTypeControl: false,
                        zoom: 10
                    },
                    listeners : {
                        maprender : function(comp, map) {
                            var marker = new google.maps.Marker({
                                id: 'currentMarker',
                                position: currentLocation,
                                map: map,
                                shadow: shadow,
                                icon  : image,
                                title: 'Huidige Locatie'
                            });
                            function addInfoWindow(marker, id, location, functie, i){
                                google.maps.event.addListener(marker, 'click', function() {
                                    closeInfoWindows();
                                    var infoContent1 = '<a href="#" class="functieCLS" onclick="mapShowDetail('+i+');">'+ functie + '<br/>' + '<span class="locatieCLS">' + location + '</span></a>' +
                                    '<br/><a href="#" class="meerCLS" onClick="mapAllJobs('+i+');">Meer vacatures &gt;</a></p>';
                                    infoWindow1 = new google.maps.InfoWindow({
                                        content: infoContent1,
                                        cls: 'infowindow1'
                                    });
                                    infoWindow1.open(map, marker);
                                    openInfoWindow1 = true;
                                });                  
                            }
                            function addInfoWindow2(marker, id, location, functie, i){
                                google.maps.event.addListener(marker, 'click', function() {
                                    closeInfoWindows();
                                    var infoContent2 = '<a href="#" class="functieCLS" onclick="mapShowDetail('+i+');">'+ functie + '<br/>' + '<span class="locatieCLS">' + location + '</span></a>';
                                    infoWindow2 = new google.maps.InfoWindow({
                                        content: infoContent2,
                                        cls: 'infowindow2'
                                    });
                                    infoWindow2.open(map, marker);
                                    openInfoWindow2 = true;
                                });                  
                            }
                             
                            var i = 0;
                            var totalMarkers = datastore2.getCount();
                            console.log('Count Datastore 2: '+ datastore2.getCount());
                            for(i=0;i<totalMarkers;i++) {
                                var selectedMarker = datastore2.getAt(i);
                                var lat = selectedMarker.data.lat;
                                var lng = selectedMarker.data.lng;
                                var id = selectedMarker.data.id;
                                var location = selectedMarker.data.locatie;
                                var functie = selectedMarker.data.functie;
                                var positionMarker = new google.maps.LatLng(lat, lng);
                                
                                function checkCordinates() {
                                    var p;
                                    for(p=0;p<totalMarkers;p++) {
                                        if(p!=i) {
                                            var checkMarker = datastore2.getAt(p);
                                            var latCheck = checkMarker.data.lat;
                                            var lngCheck = checkMarker.data.lng;
                                            if(lat==latCheck && lng == lngCheck){
                                                console.log('blauwe marker');
                                                return 1;
                                            }
                                        }
                                    }
                                }
                                
                                if(checkCordinates(positionMarker)==1) {
                                    var marker = new google.maps.Marker({
                                        id: 'idMarker'+ (id),
                                        position: positionMarker,
                                        map: map,
                                        icon: pointer_deloitte2,
                                        title: 'Job'+(id)
                                    });
                                    addInfoWindow(marker, id, location, functie, i);
                                    
                                } else {
                                    var marker = new google.maps.Marker({
                                        id: 'idMarker'+ (id),
                                        position: positionMarker,
                                        map: map,
                                        icon: pointer_deloitte1,
                                        title: 'Job'+(id)
                                    });
                                    addInfoWindow2(marker, id, location, functie, i);
                                }
                            }
                        },
                    
                    }  
                }
                ]
            });
    So, on android phones they are not able to move on the map, they can't scroll southwards, eastwards etc. I believe they can't press on the markers too.

    Kevin

  2. #2

    Default

    I have noticed a similar problem, google maps in panel not scrolling on android devices but working fine on iphones. Here is my code:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Testing</title>

    <link rel="stylesheet"
    href="sencha-touch.css"
    type="text/css" />

    <script type="text/javascript"
    src="sencha-touch.js"></script>

    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
    </script>

    <script type="text/javascript">

    Ext.setup({
    tabletStartupScreen: 'cf_tablet_startup.png',
    phoneStartupScreen: 'cf_phone_startup.png',
    icon: 'cf_phone_icon.png',
    glossOnIcon: false,
    onReady: function() {


    var mapPnl = new Ext.Panel ({
    items: [
    {
    id: 'googleMap',
    xtype: 'map',
    useCurrentLocation: false,
    mapOptions : {
    center : new google.maps.LatLng(37.781598,-122.391513), //SF
    zoom : 16,
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    navigationControlOptions: {
    style: google.maps.NavigationControlStyle.DEFAULT
    }
    }
    }
    ]

    });

    var tapHandler = function(b,e) {
    switch (b.getText()){
    case 'Find':
    mainPnl.setActiveItem(0);
    break;
    }
    }


    var mainTB = new Ext.Toolbar({
    dock: 'top',
    layout: {pack: 'center'},
    items: [{
    margin: 'auto',
    xtype: 'segmentedbutton',
    items: [
    {text: 'Find', handler: tapHandler, pressed: true }
    ]
    }]
    });


    var mainPnl = new Ext.Panel({
    fullscreen: true,
    items: [mapPnl],
    layout: {
    type: 'card'
    },
    cardSwitchAnimation: 'fade',
    dockedItems: [
    {xtype: 'toolbar', dock: 'top', title: 'Finder'},
    mainTB
    ]
    })
    }
    })

    </script>

    </head>
    <body>

    </body>
    </html>

  3. #3
    Touch Premium Member
    Join Date
    Dec 2010
    Location
    Jakarta, Indonesia
    Posts
    51

    Default

    I got this problem too on my android (froyo 2.2) , is this sencha bug or android browser suck

Similar Threads

  1. Google Maps, Sencha Touche and Android
    By stefx in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Oct 2010, 6:39 AM
  2. Google Maps
    By Gamer in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Oct 2010, 11:50 AM
  3. Ext.Map/Google Maps marker and android
    By apw in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 26 Jun 2010, 5:11 AM
  4. Forms and Google maps
    By pdchapin in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Aug 2008, 11:28 AM
  5. [Desktop 2.0] Live-Maps / Google-Maps Module v0.1
    By franckxx in forum Community Discussion
    Replies: 10
    Last Post: 22 Mar 2008, 1:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •