Results 1 to 10 of 10

Thread: Essential whitespace removed from Ext.map map options

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default Essential whitespace removed from Ext.map map options

    I'm trying to get a google map centered on a specific location by setting the map options via the inspector.
    I'm using Sencha Touch 2.2.1
    This is the contents of mapOptions:
    Code:
    {    center: new google.maps.LatLng(43.768732,11.256901),
     zoom: 16
    }
    Which I'm assuming gets broken when parsed, because in the view.js file it comes out as (note the missing whitespace between 'new' and 'google':
    Code:
    Ext.define('iFreshWebApp.view.MapLeaf', {    extend: 'Ext.Container',
    
    
        config: {
            id: 'MapLeaf',
            layout: {
                type: 'card'
            },
            scrollable: false,
            items: [
                {
                    xtype: 'map',
                    centered: false,
                    id: 'theMap',
                    itemId: 'mymap',
                    mapOptions: {
                        center: newgoogle.maps.LatLng(43.768732,
                        11.256901),
                        zoom: 16
                    }
                }
            ]
        }
    
    
    });
    This causes the app not to load. (newgoogle is undefined)

    I tried alternatively putting quotes around 'new google.maps.LatLng(43.768732,11.256901)' which caused the chrome console to output
    Code:
    Uncaught TypeError: Cannot use 'in' operator to search for 'longitude' in new google.maps.LatLng(43.768732,11.256901)
    Any help would be appreciated.

    Cheers

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    321
    Vote Rating
    31
      0  

    Default

    thanks for the detailed report - we'll look into this shortly!
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    321
    Vote Rating
    31
      0  

    Default

    On reviewing your example - you're using a javascript expression as a config, which Architect doesn't support, so you have 2 options:

    1) you could define this in a controller action

    2) you could define the value in your initialize function (in ExtJS you'd use Process Config, but in touch, you'd do this in initalize)

    Hope that helps!
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Thanks for your reply.
    Should something like this work for the initialise function?
    Code:
    listeners: [                    {
                            fn: function(component, eOpts) {
                                this.mapOptions = {center: new google.maps.LatLng(43.768732,11.256901), zoom: 1};
                            },
                            event: 'initialize'
                        }
                    ]
    I'm still having no luck.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    321
    Vote Rating
    31
      0  

    Default

    I'm pretty sure you'll actually want to do something like this:


    Code:
    Ext.define('iFreshWebApp.view.MapLeaf', {
        extend: 'Ext.Container',
        config: {      // ... your config code here ...    },
        initialize: function() {
            // since you're overriding, be sure to call the previous code...
            this.callParent();
            // set your config and/or run other code here... e.g.
            this.mapOptions = {center: new google.maps.LatLng(43.768732,11.256901), zoom: 1};
        }
    });
    Last edited by honestbleeps; 16 Jun 2013 at 10:38 PM. Reason: formatting
    Steve Sobel
    @honestbleeps
    Sencha Architect Development Team

  6. #6
    Sencha User
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    925
    Vote Rating
    33
      0  

    Default

    Just to be totally clear... initialize is a config option.... take a look at this:

    http://www.sencha.com/forum/showthre...map-component!
    Jason Minnick
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default

    That helps a lot. Thanks.

  8. #8
    Sencha User
    Join Date
    May 2013
    Posts
    31
    Vote Rating
    2
      0  

    Default Cannot center the map or add markers

    Hello, im trying to use your solution to the Architect problem, but I cannot get it work.. Could you please throw some light on it?

    Also, Ill appreciate if you can give us an example on how to add Markers.. I was last 4 hours trying to test code I found in google without success... :S very frustrating and it slow down our development. Thanks!!

    Code:
    Ext.define('MyApp.view.MapView', {
        extend: 'Ext.Container',
        alias: 'widget.mapview',
    
    
        config: {
            id: 'MapView',
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'map',
                    itemId: 'mymap'
                }
            ]
        },
    
    
        initialize: function() {
            this.callParent();
    
    
            debugger;
    
    
            this.mapOptions = {
                center: new google.maps.LatLng(-0.219565,-78.513388),
                mapTypeId: google.maps.MapTypeId.ROADMAP,   
                zoom: 17
    
    
            };
        }
    
    
    });

  9. #9
    Sencha User
    Join Date
    May 2013
    Posts
    31
    Vote Rating
    2
      0  

    Default the option is working, but the markers no

    Hello, trying every code in google that I found finally make it work for the center option in my app...
    Maybe the code help others or the whitespace removed issue...

    please let me know if you know what Im getting the error "Uncaught Error: Invalid value for property <map>: [object Object]", the error is on "
    main.js:26"
    "http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js"

    when I try to add a marker. Thanks!

    Code:
    Ext.define('MyApp.view.MapView', {
        extend: 'Ext.Container',
        alias: 'widget.mapview',
    
    
        config: {
            id: 'MapView',
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'map',
                    itemId: 'mymap'
                }
            ]
        },
    
    
        initialize: function() {
            this.callParent();
    
    
            var gMap = this.down('map');
    
    
            var myLatlng = new google.maps.LatLng(-0.219565,-78.513388);
    
    
            gMap.setConfig({
                mapOptions : {
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,   
                    zoom: 17
                }
            });
    
    
            debugger;
    
    
            var marker = new google.maps.Marker(
            { position: myLatlng,
                map: googlemap
            });
        }
    
    
    });

  10. #10
    Sencha User
    Join Date
    May 2013
    Posts
    31
    Vote Rating
    2
      0  

    Default

    Hello, Ive been researching several hours, the problem with the architect is to add the "Map" component INSIDE another component like a panel.. then, the features, properties and listeners could not be related to the "MAP" component...

    this causes the listeneres not be associated with the map, and not fire when the maprender should trigger...

    so, the best approach is to create a independent MAP view on a map.js file... do all the configuration with the listeners, configs, etc...

    Here you have complete example of having a panel... a map inside, and adding a MARK on it... enojoy!!

    this goes into the view js file: MapView.js

    Code:
    Ext.define('MyApp.view.MapView', {
        extend: 'Ext.Container',
        alias: 'widget.mapview',
    
    
        requires: [
            'MyApp.view.AppGoogleMap'
        ],
    
    
        config: {
            id: 'MapView',
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'appgooglemap'
                }
            ]
        }
    
    
    });
    // THIS GOES INTO A SEPARATE FILE AppGoogleMap.js

    Code:
    Ext.define('MyApp.view.AppGoogleMap', {
        extend: 'Ext.Map',
        alias: 'widget.appgooglemap',
    
    
        config: {
            listeners: [
                {
                    fn: 'onMapMaprender',
                    event: 'maprender'
                }
            ]
        },
    
    
        onMapMaprender: function(map, gmap, eOpts) {
            //gmap is null, so we need to get the google map instance from sencha map object:
            var theGoogleMapInstance = map._map;
    
    
            var myLatlng = new google.maps.LatLng(-0.219565,-78.513388);
    
    
            var infoWindow = new google.maps.InfoWindow({ content:'Sample Content' });
    
    
            var marker = new google.maps.Marker(
            { position: myLatlng,
                title: 'this is the place'
            });
    
    
            marker.setMap(theGoogleMapInstance);
    
    
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(theGoogleMapInstance, marker);
            });
        },
    
    
        initialize: function() {
            this.callParent();
    
    
            var gMap = this;
    
    
            var myLatlng = new google.maps.LatLng(-0.219565,-78.513388);
    
    
            gMap.setConfig({
                mapOptions : {
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,   
                    zoom: 17
                }
            });
    
    
            //the gMap._map property is null at this time... because the Google Maps has not been created yet
            //we cannot add the marker yet
            //var marker = new google.maps.Marker(
            //   { position: myLatlng
            //    });
    
    
            //marker.setMap(gMap._map);
    
    
    
    
        }
    
    
    });

Tags for this Thread

Posting Permissions

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