How to place a Google Map side by side with another panel?

[pinker]

Hi.

I am new on Sencha Touch but I am facing a problem. I would like to place Google Maps side by side with another Panel.
How can I achieve this?

I tried the different layouts but without any good results.

Any help will be appreciated.

Thanks

[rdougan]

Checkout the HBox layout:

http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.HBox

[pinker]

Thanks for your quick reply. I did the following but the map is not being shown:

var map = new Ext.Map({
title: 'Map', // Name that appears on this tab
getLocation: true, // Gets user's current location
mapOptions: { // Used in rendering map
zoom: 12
}
});


Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
html: 'message list',
style: 'background-color: #5E99CC;',
flex: 1
},
{
items: [map],
flex: 2
}
]
});

[rdougan]

This works for me in PR2:

Ext.application({
    launch: function()  {
        Ext.Viewport.add({
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [
                {
                    html: 'html',
                    style: 'background:lightgray'
                },
                {
                    xtype: 'map',
                    getLocation: true,
                    mapOptions: {
                        zoom: 12
                    }
                }
            ]
        });
    }
});

Ensure you have the Google Maps API file loaded.

[pinker]

Can you send me the complete code? Thanks a lot

[pinker]

Already put it to work. thanks

[pinker]

I have another question. Instead of placing
{
xtype: 'map',
getLocation: true,
mapOptions: {
zoom: 12
}
}

can I refer a variable previously defined (like var mapdemo = Ext.create('Ext.Map', ...)?

[rdougan]

Yup.

[pinker]

How can I do that?
When trying to put something like below does not work.

<code>
var map = new Ext.Map({
title: 'Map', // Name that appears on this tab
getLocation: true, // Gets user's current location
mapOptions: { // Used in rendering map
zoom: 12
}
});


Ext.application({
launch: function() {
Ext.Viewport.add({
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [
{
html: 'html',
style: 'background:lightgray'
},
{
items: [map]
}
]
});
}
});
</code>

[rdougan]

You do not need to put it inside another items: []. That means that your second panel (on the right side, where the map was before) is now another container, and you are adding the map to that container.

Instead, just do the following:

Ext.application({
    launch: function()  {
        var map = Ext.create('Ext.Map', {
            getLocation: true,
            mapOptions: {
                zoom: 12
            }
        });

        Ext.Viewport.add({
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [
                {
                    html: 'html',
                    style: 'background:lightgray'
                },
                map
            ]
        });
    }
});

Notice how I am adding it as an item:

            items: [
                {
                    html: 'html',
                    style: 'background:lightgray'
                },
                map
            ]