Results 1 to 10 of 10

Thread: Ext.Map not showing up on iPad

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    4
      0  

    Default Ext.Map not showing up on iPad

    The map displays fine on Safari desktop, but will not display on the iPad. I searched the forum and didn't see any posts regarding this problem. Is this a known issue or is the example in the docs incorrect?

    Code:
    Ext.define('MyApp.view.Map', {
    	extend: 'Ext.Map',
    	
    	config: {
    		mapOptions: {
    			disableDefaultUI: true,
    			zoomControl: true,
    			zoom: 10
    		},
    		useCurrentLocation: true,
    	}
    });
    I also tried different layouts and none made any difference.

    Thanks,

    Bruce

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Vote Rating
    1524
      0  

    Default

    This is loading on my iPad just fine:

    Code:
    Ext.define('MyApp.view.Map', {
    	extend: 'Ext.Map',
    
    	config: {
    		mapOptions: {
    			disableDefaultUI: true,
    			zoomControl: true,
    			zoom: 10
    		},
    		useCurrentLocation: true
    	}
    });
    
    Ext.setup({
        onReady : function() {
    
            Ext.create('MyApp.view.Map', {
                fullscreen : true
            });
    
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    4
      0  

    Default

    In my case I'm trying to show the map inside a tab panel. Would you mind trying that on your iPad and seeing if it works?

    I doubt this makes a difference, but the tab panel is in a simple Main.js container which is in the Ext.Viewport.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Vote Rating
    1524
      0  

    Default

    is the Map a child of the tab panel or is the map within a panel who is a child of the tab panel?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    4
      0  

    Default

    The map is a separate view that is added to the tab panel.

    Tab panel code:
    Code:
    Ext.define('MyApp.view.Detail', {
        extend: 'Ext.TabPanel',
        
        config: {
            tabBar: {
                docked: 'bottom',
                layout: {
                    pack: 'center'
                },
            },
            items: [],
        }
    });
    Mapview code:
    Code:
    Ext.define('MyApp.view.Map', {
    	extend: 'Ext.Map',
    	
    	config: {
    		//layout: 'card',
    		mapOptions: {
    			disableDefaultUI: true,
    			zoomControl: true,
    			zoom: 10
    		},
    		useCurrentLocation: true,
    	}
    });

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Vote Rating
    1524
      0  

    Default

    Ok... but is the map wrapped in a panel?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    4
      0  

    Default

    Actually no. I just added the Ext.Map object directly to the tab panel. Is that why my code doesn't work?

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Vote Rating
    1524
      0  

    Default

    hmmm... will test it and see what I see
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #9
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    4
      0  

    Default Map doesn't show even in a panel

    I tried embedding the map in a panel and it still won't display on an iPad. Any suggestions?

    Thanks,

    Bruce

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Same problem here, works fine as a webapp in chrome and safari in my iPad, but doesn't show the map when compiled as a native app.

    Code:
                                        var lat = record.get('Latitude');
                                        var long = record.get('Longitude');
                                        var map = Ext.create('Ext.Map',
                                        {
                                            height:500,
                                            mapOptions:
                                            {
                                                center: new google.maps.LatLng(lat, long),
                                                zoom: 12,
                                                minZoom: 9,
                                                streetViewControl: false,
                                                zoomControl: false,
                                                overviewMapControl: false,
                                                mapTypeControl: false
                                            },
                                            listeners:
                                            {
                                                'maprender' : function(comp, map)
                                                {
                                                    var storeLocationMarker = new google.maps.MarkerImage('resources/images/marker-red.png',
                                                        new google.maps.Size(16, 26),
                                                        new google.maps.Point(0,0),
                                                        new google.maps.Point(8, 26));
                                                    var markerShadow = new google.maps.MarkerImage('resources/images/marker-shadow.png',
                                                        new google.maps.Size(25, 15),
                                                        new google.maps.Point(0,0),
                                                        new google.maps.Point(5, 15));
    
    
                                                    new google.maps.Marker({
                                                        position: new google.maps.LatLng(lat, long),
                                                        map: map,
                                                        shadow: markerShadow,
                                                        icon: storeLocationMarker,
                                                        title: record.get('title')
                                                    });
    
    
                                                }
                                            }
                                        });
    And then I add my map to my panel:

    Do we need maybe to call an explicit init method on the GoogleMap API ?
    Code:
            var inPanel = Ext.create('Ext.Panel',
                {
                    html:content,
                    height:700,
                    scrollable: {
                        direction: 'vertical',
                        directionLock: true
                    }
                });
            inPanel.add(map);
    Last edited by boris.barcelli; 6 Mar 2012 at 8:30 PM. Reason: reformating the code to make it readable again

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •