1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    9
    Vote Rating
    0
    vaskito is on a distinguished road

      0  

    Question Cannot add Marker to Map. Please help!

    Cannot add Marker to Map. Please help!


    Hello, people.

    I'm having a great time learning Sencha Touch but it seems to me that somethings should be simpler or are buggy. What I'm trying to do right now is add a Marker to show the current location on a Map.

    I have a Viewport with a top Toolbar and a TabPanel, with a Map on the first card (tab) and I can get the current location without a problem. The problem I'm having is with the creation of the marker indicating where I am.

    I've tried event listeners on both the map and it's parent container, but still can't get it to work. Maybe it's a scope problem?! Any help would be much appreciated...

    Code:
    Ext.setup({
        ...
        onReady: function() {
            
            var TopBar, Tabs, MapHome, Viewport, Homecard;
            
            /* 
             *         HOME
             */
            
            MapHome = new Ext.Map({
                title: 'Map',
                useCurrentLocation: true
            });
    
            
            Homecard = new Ext.Panel({
                title: "home",
                iconCls: "home",
                items: [MapHome],
                listeners: {
                    activate: function() {
                        var marker = new google.maps.Marker({
                            position: MapHome.map.center,
                            title : 'testing',
                            map: MapHome.map
                        });
                    }
                }
            });
            
            /*
             *         MAIN
             */
            
            TopBar = new Ext.Toolbar({
                dock: 'top',
                xtype: "toolbar",
                title: "<img class='titleLogo' src='css/images/logo.png' />",
                items: [
        
                    { xtype: 'spacer' },
                    {
                        iconCls: 'settings9',
                        iconMask: true,
                        text: 'options'
                    }
                ]
            });
            
            Tabs = new Ext.TabPanel({
                id: 'tabs',
                //fullscreen:true,
                dock: 'bottom',
                flex: 1,
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                items: [ Homecard]
            });
    
            Viewport = new Ext.Panel({
                fullscreen:true,
                layout:{type:'vbox',align: 'stretch'},
                useLoadMask:true,
                ui:'dark',
                items: [TopBar,Tabs],
            });
        }
    });

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    I tried this code on Safari and it shows the marker correctly. Can you add device details?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    9
    Vote Rating
    0
    vaskito is on a distinguished road

      0  

    Default


    Quote Originally Posted by bharatn View Post
    I tried this code on Safari and it shows the marker correctly. Can you add device details?
    I've been testing on Safari and Google Chrome on Windows 7. Both are a no go. Deploying the app on my iPad also has the same problem.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    jrboddie is on a distinguished road

      0  

    Default


    As written, there is an error in the MapHome definition. There is an extra comma and closing brace. However, fixing this, I find that the map correctly centers on the current location but the marker that is generated is located in California. I have not been able to get the marker to show the current location.

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    9
    Vote Rating
    0
    vaskito is on a distinguished road

      0  

    Default


    Quote Originally Posted by jrboddie View Post
    As written, there is an error in the MapHome definition. There is an extra comma and closing brace.
    The extra comma and closing brace were just typos.

    Quote Originally Posted by jrboddie View Post
    I find that the map correctly centers on the current location but the marker that is generated is located in California. I have not been able to get the marker to show the current location.
    I figured that out just now, too. The marker is set on the default map location (a big mansion somewhere in Palo Alto). I think I might have found a solution, though. Will post it here if it works.

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    jrboddie is on a distinguished road

      0  

    Default


    OK, This works for me:

    Code:
    navigator.geolocation.getCurrentPosition(function (position) { 
                        var homePosition = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                            var marker = new google.maps.Marker({
                                position : homePosition,
                                map : MapHome.map
                            });                                        
                        });
            
            
            MapHome = new Ext.Map({
                title: 'Map',
                id:'MapHome',
                useCurrentLocation: true
            });    
            
            Homecard = new Ext.Panel({
                title: "home",
                iconCls: "home",
                items: [MapHome]
            });

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    9
    Vote Rating
    0
    vaskito is on a distinguished road

      0  

    Default


    Quote Originally Posted by jrboddie View Post
    OK, This works for me:

    Code:
    navigator.geolocation.getCurrentPosition(function (position) { 
                        var homePosition = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                            var marker = new google.maps.Marker({
                                position : homePosition,
                                map : MapHome.map
                            });                                        
                        });
            
            
            MapHome = new Ext.Map({
                title: 'Map',
                id:'MapHome',
                useCurrentLocation: true
            });    
            
            Homecard = new Ext.Panel({
                title: "home",
                iconCls: "home",
                items: [MapHome]
            });
    That's a good solution, but since Sencha Touch works out the geolocation for you there's not much sense in doing it by yourself as you are repeating procedures, I believe.

    What I did was use a diferent event listener as explained in the next Reply.

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    9
    Vote Rating
    0
    vaskito is on a distinguished road

      0  

    Default Solution found!

    Solution found!


    Since the marker was not rendering at the proper time, placing it somewhere in California before the map was centered in your current location, it had to be a problem with the order in which these two events (map centering and marker rendering) are triggered.

    Therefore I tried the centerchange event on the Map component and it worked. Code below:

    Code:
    Ext.setup({
        fullscreen: true,
        tabletStartupScreen: 'splash.png',
        phoneStartupScreen: 'splash.png',
        icon: 'icon.png',
        glossOnIcon: true,
        onReady: function() {
    
    var refreshMap = function(themap){
    // It should clear all markers first, but that is not important right now since the map has all interaction disabled
            var marker = new google.maps.Marker({
                position: themap.center,
                title : 'testing',
                map: themap
            });
    }
    
            
            var TopBar, Tabs, MapHome, Viewport, Homecard;
            
            /* 
             *         HOME
             */
            
            MapHome = new Ext.Map({
                title: 'Map',
                useCurrentLocation: true,
                listeners: {
                    centerchange : function(comp, map){
                        refreshMap(map);
                    }
               },
                mapOptions : {
                    mapTypeControl : false,
                    navigationControl : false,
                    streetViewControl : false,
                    backgroundColor: 'transparent',
                    disableDoubleClickZoom: true,
                    zoom: 17,
                    draggable: false,
                    keyboardShortcuts: false,
                     scrollwheel: false,
                    mapTypeId: google.maps.MapTypeId.HYBRID
               }
            });
    
    
            
            Homecard = new Ext.Panel({
                title: "home",
                iconCls: "home",
                items: [MapHome]
            });
            
            /*
             *         MAIN
             */
            
            TopBar = new Ext.Toolbar({
                dock: 'top',
                xtype: "toolbar",
                title: "<img class='titleLogo' src='css/images/logo.png' />",
                items: [
        
                    { xtype: 'spacer' },
                    {
                        iconCls: 'settings9',
                        iconMask: true,
                        text: 'options'
                    }
                ]
            });
            
            Tabs = new Ext.TabPanel({
                id: 'tabs',
                //fullscreen:true,
                dock: 'bottom',
                flex: 1,
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                items: [ Homecard, Nearbycard, Waypointscard, Shopcard, Searchcard]
            });
    
    
            Viewport = new Ext.Panel({
                fullscreen:true,
                layout:{type:'vbox',align: 'stretch'},
                useLoadMask:true,
                ui:'dark',
                items: [TopBar,Tabs],
            });
        }
    });

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    jrboddie is on a distinguished road

      0  

    Default


    I agree. Your method is better. I tried to use centerchanged but must have made an error which failed silently. The problem with all of this is understanding and controlling when things happen.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."