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

      0  

    Default Essential whitespace removed from Ext.map map options

    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 - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    270
    Vote Rating
    26
    honestbleeps will become famous soon enough honestbleeps will become famous soon enough

      0  

    Default


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

  3. #3
    Sencha - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    270
    Vote Rating
    26
    honestbleeps will become famous soon enough honestbleeps will become famous soon enough

      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
    tmunro is on a distinguished road

      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 - Architect Dev Team
    Join Date
    Jul 2012
    Posts
    270
    Vote Rating
    26
    honestbleeps will become famous soon enough honestbleeps will become famous soon enough

      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 - Architect Dev Team
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    806
    Vote Rating
    31
    jminnick has a spectacular aura about jminnick has a spectacular aura about

      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
    tmunro is on a distinguished road

      0  

    Default


    That helps a lot. Thanks.

  8. #8
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    1
    tavojavi is on a distinguished road

      0  

    Default Cannot center the map or add markers

    Cannot center the map or add markers


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

    Also, I´ll 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
    22
    Vote Rating
    1
    tavojavi is on a distinguished road

      0  

    Default the option is working, but the markers no

    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 I´m 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
    22
    Vote Rating
    1
    tavojavi is on a distinguished road

      0  

    Default


    Hello, I´ve 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);
    
    
    
    
        }
    
    
    });

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi