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

      0  

    Default Unanswered: Map with current position marker

    Unanswered: Map with current position marker


    I have tab panel with a number of tabs and one of these tabs displays a map with a marker, I have put the the code for the map and marker in another file and tried to call it in to the tab but no success. Where am i going wrong?

    Code:
    Ext.define('MyApp.view.Search', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    title: 'Results',
                    iconCls: 'organize',
                    html: 'results',
                    scrollable: 'horizontal'
                },
                {
                    xtype: 'container',
                    title: 'Map',
                    iconCls: 'maps',
                    layout: {
                        type: 'card'
                    },
                    items: [
                        {
                            xtype: 'mapview'
    
    
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'Favourites',
                    iconCls: 'favorites',
                    html: 'favs'
                },
                {
                    xtype: 'container',
                    title: 'RSS',
                    iconCls: 'time',
                    html: 'rss'
                },
                {
                    xtype: 'container',
                    title: 'Reviews',
                    iconCls: 'compose',
                    html: 'reviews'
                },
                {
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'MyApp?',
                    items: [
                        {
                            xtype: 'button',
                            ui: 'round',
                            width: 44,
                            iconAlign: 'center',
                            iconCls: 'home',
                            iconMask: true,
                            id: 'home'
                        },
                        {
                            xtype: 'button',
                            align: 'right',
                            ui: 'round',
                            width: 44,
                            iconCls: 'info',
                            iconMask: true,
                           id: 'info'
                        }
                    ]
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        }
    
    
    });
    
    
    Ext.define('MyApp.view.MapView', {
        extend: 'Ext.Map',
       xtype: 'mapview',
             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
                    });
                }
            }
        }
    })

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    48
    Vote Rating
    3
    Answers
    4
    shwetapande10 is on a distinguished road

      0  

    Default


    What is the exact issue? Is your map not displayed on the screen?
    If yes, try giving some height to your map component.

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

      0  

    Default


    No all I'm getting is a shaded screen with nothing being displayed, am i going about calling the mapview right? Very new to sencha and js

Thread Participants: 1

Tags for this Thread