1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
    Paul86 is on a distinguished road

      0  

    Default Unanswered: Google Map API fails to render

    Unanswered: Google Map API fails to render


    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

    Code:
    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
                    });
                }
            }
        }
    })

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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'
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
    Paul86 is on a distinguished road

      0  

    Default


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

    Code:
    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'
                }
            ]
        }
    })

Thread Participants: 1