Cannot add Marker to Map. Please help!

[vaskito]

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...

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],
        });
    }
});

[bharatn]

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

[vaskito]

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.

[jrboddie]

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.

[vaskito]

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.

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.

[jrboddie]

OK, This works for me:

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]
        });

[vaskito]

OK, This works for me:

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.

[vaskito]

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:

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],
        });
    }
});

[jrboddie]

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.