Google Map API fails to render

[Paul86]

Hi i have been trying to render a map that includes a marker with the below code but all I am getting is a shaded screen. Any help would be appreciated

Ext.define('FirstApp.view.Map',{
    extend:'Ext.Panel',
    xtype: 'maps',
         config: {
        useCurrentLocation: true,
         layout:'fit',
        listeners: {
            maprender : function(comp, map){
                new google.maps.Marker({
                    position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                    map: map
                });
            }
        }
    }
})

[mitchellsimoens]

You're not telling it to render a map. You are showing a panel. Extend Ext.Map instead of Ext.Panel and remove the layout : 'fit'

[Paul86]

Hi Mitchell i have tried this with no success, below is the exact code i am using:

Ext.define('FirstApp.view.Map',{
    extend:'Ext.Map',
    xtype: 'maps',
    
         config: {
        useCurrentLocation: true,
        listeners: {
            maprender : function(comp, map){
                new google.maps.Marker({
                    position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                    map: map
                });
            }
        }
    }
})


Ext.define('FirstApp.view.MapContainer',{
    extend:'Ext.NavigationView',
    xtype:'mapcontainer',
    config:{
        title:'Map',
        iconCls:'map',
        items:[
            {
                xtype:'maps'
            }
        ]
    }
})