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
                    }
                }
            }]
            }
        }
    
    
    });

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      1  

    Default


    Maybe your map is there, only it is not visible because it is too small... Have you tried adding something like { layout: 'fit' }?

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

      0  

    Default


    Doesn't work either.

    Code:
    Ext.define("app.view.GoogleMaps", {
        extend: 'Ext.Map',
        alias: "widget.googlemapscard",
        config: {
            layout: 'fit',
            mapOptions:{
                zoom: 15,
                disableDefaultUI: true,
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            }
    
    
        }
    });

  5. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    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
                    }
                }
            }]
            }
        }
    
    
    });

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

      0  

    Default


    I did something wrong but now it works. Thank you!

Thread Participants: 1