google maps through html in sencha, Cannot set property 'position' of undefined

[JurgenL]

I'm trying to get google maps in my sencha touch app panel but without using the ext.Map variable (for school assignment purposes).

What I've done is I've put a piece of html in the this.items and tried to get google maps into that piece of html.
the error I get while debugging in Chrome: Uncaught TypeError: Cannot set property 'position' of undefined
the reason for this is it can't properly read the html in this.items as a node (I think),
but I also can't seem to find a way to select html automaticaly generated by sencha,
so I have no idea how I can fix this

MyApp.views.MapPanel = Ext.extend(Ext.Panel,{
    title: 'Map',
    layout: 'fit',
    displayField: 'naam',
    initComponent: function(){

        var centerMap = new google.maps.LatLng(52.18958, 5.29524);
        var optionMap = {
            center: centerMap,
            zoom: 9,
            MapTypeId: google.maps.MapTypeId.ROADMAP
        };

        this.items = [
            {
                html: '<div id="map_canvas" style="width: 320px; height: 480px;"></div>'
            }
        ];

        var map = new google.maps.Map(this.items[0].html, optionMap);

        console.log(this.items[0].html);

        MyApp.views.MapPanel.superclass.initComponent.apply(this,arguments);
    }
});

Ext.reg('myapp-mappanel',MyApp.views.MapPanel);

any help? I've tried everything...

[JurgenL]

I've managed to get my map in but it doesn't work and it looks like this:
Schermafbeelding 2012-06-05 om 14.07.29.jpg

the updated code:

MyApp.views.MapPanel = Ext.extend(Ext.Panel,{
    title: 'Map',
    layout: 'fit',
    displayField: 'naam',
    initComponent: function(){

        var centerMap = new google.maps.LatLng(52.18958, 5.29524);
        var optionMap = {
            center: centerMap,
            zoom: 8,
            MapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var canvas = document.createElement('div');
        canvas.id = 'map_canvas';
        canvas.style.width = '320px';
        canvas.style.height = '480px';

        var map = new google.maps.Map(canvas, optionMap);

        this.items = [
            {
                html: canvas
            }
        ];

        //console.log(this.items[0].html);
        console.log(canvas);

        MyApp.views.MapPanel.superclass.initComponent.apply(this,arguments);
    }
});

Ext.reg('myapp-mappanel',MyApp.views.MapPanel);

Nothing works so I can't zoom or scroll through the map and it won't rescale its size, setting width and height to 100% doesn't work either...

[mitchellsimoens]

Why aren't you using Ext.Map and add it as an item?

[JurgenL]

according to our teacher it's easier and quicker to stylize the map this way...
I kinda agree + she hands out the grades, I won't argue with her too much :p

I found a solution for this problem btw...
I made a separate JS-file and added the map api through there en through functions in that JS-file I'm able to send data from the database, adjust the map, and so on...

[mitchellsimoens]

Sorry to say it but she is wrong. Ext.Map just takes care of adding the google map in and sizing as it will then take part of the layouts.

[JurgenL]

I've never stylized an Ext.Map entirely, so I've never really compared, but stylizing the way I do right now is pretty easy so far.
If our teacher is right... we can't be sure, but to be honest if I had a choice I would've stuck to Ext.Map...