Access the map instance before it is rendered?

[alawibh]

Hi everyone,

Look at this code:

var MyClientInfo;var tabpanel; 
var mapdemo; 

function initialize() {
    var position = new google.maps.LatLng(26.23122,50.51097);
    var marker = new google.maps.Marker({
                 position: position,
                 title : 'Sencha HQ'
            });
    mapdemo.map.panTo(position);            
    marker.setMap(mapdemo);
    mapdemo.maps.addOverlay(marker);      
}




Ext.application({
    name: 'MyApp',
    launch: function() {




        var position = new google.maps.LatLng(37.44885,-122.158592);
        infowindow = new google.maps.InfoWindow({
                content: 'Sencha Touch HQ'
            });
            
        mapdemo = new Ext.Map({
            mapOptions : {
                center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
            },




            listeners : {
                maprender : function(comp, map){
                    var marker = new google.maps.Marker({
                                     position: position,
                                     title : 'Sencha HQ',
                                     map: map
                                });




                                google.maps.event.addListener(marker, 'click', function() {
                                     infowindow.open(map, marker);
                                });
                    setTimeout( function(){ map.panTo (position); } , 1000);
                }
            }
        });
                   
        tabpanel = Ext.create("Ext.tab.Panel", {
            xtype:'tabpanel',
            id: 'tabpanel',            
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Home',
                    iconCls: 'MyHome',
                    scroll: 'vertical',
                    html: [ "My HTML 1"    ], 
                    dockedItems: [{
                        xtype: "toolbar",
                        docked: 'top',
                        items: [ 
                            {
                                xtype: "spacer", 
                            },
                            {
                                xtype: "button", 
                                text: "Refresh", 
                                handler: function () { 
                                    // function
                                }                                
                            }
                        ]
                    }]                            
                },               
                {
                    xtype: 'list',
                    title: 'Snapshot',
                    iconCls: 'Snapshot',
                    itemTpl: "<b>{title}:</b> {desc}",
                    store: {
                        fields: ['title', 'desc'],
                        data: [
                            {title: 'Name', desc: "Sencha Name"},
                            {title: 'Email', desc: "Sencha Email"},
                            {title: 'Mobile 1', desc: "Sencha Mobile 1"},
                            {title: 'Mobile 2', desc: "Sencha Mobile 2"}
                        ]
                    }
                },
                {
                    title: 'History',
                    iconCls: 'History',
                    html: [ "My HTML 2" ].join("")
                },  
                {
                    id: 'ViolationsTab',
                    title: 'Violations',
                    iconCls: 'Violations',
                    scroll: 'vertical',
                    badgeText: "5",
                    html: [ "<div id='TblContainerV'>My HTML 3</div>" ], 
                    dockedItems: [{
                        xtype: "toolbar",
                        docked: 'top',
                        items: [ 
                            {
                                xtype: "spacer", 
                            },
                            {
                                xtype: "button", 
                                text: "Refresh", 
                                handler: function () { 
                                    //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                }                                
                            }
                        ]
                    }]                            
                },                
                {
                    title: 'Map',
                    iconCls: 'Map',
                    layout: 'fit',
                    
                    items: [mapdemo],
                    dockedItems: [{
                        xtype: "toolbar",
                        docked: 'top',
                        items: [ 
                            {
                                xtype: "spacer", 
                            },
                            {
                                xtype: "button", 
                                text: "Refresh", 
                                handler: function () { 
                                    //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                    //initialize();
                                }                                
                            }
                        ]
                    }]
                }                                                
            ]
        }).setActiveItem(0);     
    }    
});

Map created fine, but when I try to use Map instance (mapdemo), it does NOT work.
I need to use this instance to deal with map: Add markers, Overlays, ...etc.

When I call this function:

function initialize() {
    var position = new google.maps.LatLng(26.23122,50.51097);
    var marker = new google.maps.Marker({
                 position: position,
                 title : 'Sencha HQ'
            });
    mapdemo.map.panTo(position);            
    marker.setMap(mapdemo);
    mapdemo.maps.addOverlay(marker);      
}

I got the following error:

TypeError: 'undefined' is not an object (evaluating 'mapdemo.map.panTo')

Attached snapshot.

BTW, I tried this:

        var panel  = tabpanel.getComponent(0),
        index  = tabpanel.getItems().indexOf(panel),
        tabBar = tabpanel.getTabBar(),
        HomeObj   = tabBar.getItems().getAt(index);
        console.log(HomeObj);

But it didn't work . I changed the Zero index to Map Component index, but no luck.

How I can proceed to continue coding with the Map?
Any available tutorial?

Regards,

[mitchellsimoens]

Instead of using the map property, use getMap() on the Ext.Map instance.

[kinestetic]

Function that does something with map (adding marker for example):

/* mappanel - Ext.Map instance*/
function addMarker(mappanel) {
    var map=mappanel.getMap(),
    position = new google.maps.LatLng(26.23122,50.51097),
    marker = new google.maps.Marker({
        position: position,                 
        title : 'Sencha HQ',                 
        icon:'http://a3.twimg.com/profile_images/1089012240/sencha-logo_normal.png'
    });
    map.panTo(position);
    marker.setMap(map);
}

[alawibh]

Hi every1,

I tried what you suggest both, but getting the Object in only one condition:

- When I create the map in the first Tab of the panel, and activate that tab initially.
- Or, visit the map tab and wait it to load, after that executing the code of adding markers for example.

Both ways is NOT applicable for my application, any suggestions?

Thanks for your help.

Regards,

[rdougan]

This is because the Map instance is not created until the Map component is actually rendered.

We done this because of sizing problems, but I've been told that we might be able to fix it now. So I'm opening it as a ticket.

Thanks.

[kinestetic]

May be 'maprender' event will be helpfull. Тo fire 'maprender' event, you need to set Ext.Map panel as active item in your tabpanel, after that you can set as active item something else. No need to wait. Unfortunately there is no autoRender.
P.S
There is private method 'renderMap()' that fire 'maprender' event.

[Jamie Avins]

Using the maprender event will work for now. I have also changed the code a bit so you will be able to use to use the map instance much earlier and still avoids TOUCH-1030 which happens when the map is rendered offscreen.

[kinestetic]

Wonderfull! Now I can clear my map-render hooks . Thanks!