Threaded View

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Vote Rating
    0
    Answers
    2
    stackflower is on a distinguished road

      0  

    Default Answered: Ext.Map within a Ext.Panel

    Answered: Ext.Map within a Ext.Panel


    I have a panel and want to place a map (Google maps) within it. Is this possible?

    When I open my maps page directly it works fine but when I put it in a panel I only get a blank white page without a maps view.

    My Panel class:

    Code:
    Ext.define("app.view.TodoMaps", {
        extend: 'Ext.Panel',
        requires: "app.view.GoogleMaps",
        alias: "widget.todomapscard",
    
    
        config: {
            styleHtmlContent: true,
            items: [{
                docked: 'top',
                xtype: 'toolbar',
                ui: "light",
                title: 'Maps page',
                items: [
                    {
                        xtype: "button",
                        ui: "back",
                        text: "back",
                        action: 'ButtonBackToHomeClicked'
                    }]
            },
                {
                    xtype: "googlemapscard"       <----------
                }
            ]
        }
    });
    My Map class:

    Code:
    Ext.define("app.view.GoogleMaps", {
        extend: 'Ext.Map',
        alias: "widget.googlemapscard",
    
    
        //geo: geo, //Ext.util.Geolocation object
        //useCurrentLocation: geo, //same var geo with geolocation object
        config: {
            mapOptions:{
                zoom: 15,
                disableDefaultUI: true,
                //--Available Map Options--//
    
    
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            }
    
    
        }
    });
    How can I achieve that the map is visible within a panel.

    PS. the reason I need a panel is because I want to navigate back to the previous panel.

    Thanks in advance.

  2. I'm having it like this - and it works just fine (but in tab panel...):
    Code:
    Ext.define('ParkIt.view.Map', {
        extend: 'Ext.Panel',
        xtype: 'mapview',
        config: {
            title: 'Map',
            iconCls: 'maps',
            layout: 'fit',
            items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Map'
            }, {
                xtype: 'map',
                useCurrentLocation: false,
                mapOptions: {
                    zoom: 15,
                    minZoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                }
            }]
            }
        }
    
    
    });

Thread Participants: 1