Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default Bug adding mapOptions on map component!

    Bug adding mapOptions on map component!


    When I edit a mapOptions property from Sencha Architect object inspector, and I write this in this field :

    {
    zoom:15 ,
    mapTypeId:google.maps.MapTypeId.SATELLITE
    }

    Sencha Architect is writing that as a String automatically in the view:

    mapOptions: '{ \r\n zoom:15 , \r\n mapTypeId:google.maps.MapTypeId.SATELLITE\r\n}'

    instead of this:

    mapOptions: {
    zoom:15 ,
    mapTypeId:google.maps.MapTypeId.SATELLITE
    }

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    922
    Vote Rating
    32
    jminnick has a spectacular aura about jminnick has a spectacular aura about

      0  

    Default


    Which Architect build and which Framework are you using?

    I cannot reproduce your error on:

    Version 2.2.0 Build 927, Framework, Touch 2.2

    generated code:

    Code:
    { 
        zoom:15 , 
        mapTypeId:google.maps.MapTypeId.SATELLITE
    }
    
    Last edited by jminnick; 10 Apr 2013 at 6:23 AM. Reason: test results
    Jason Minnick
    Sencha Architect Development Team

  3. #3
    Sencha User hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default


    Sencha Touch 2.1.1.
    Sencha Architect 2.2.0 Build 908

  4. #4
    Sencha - Architect Dev Team
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    922
    Vote Rating
    32
    jminnick has a spectacular aura about jminnick has a spectacular aura about

      1  

    Default


    Any time you're using an expression like that you have to use "initialize."

    Give this a shot. As opposed to using the mapOptions config directly; use "initialize" in the config options like the attachment shows.

    Also, for future reference:
    http://docs.sencha.com/architect/2/#...anel-section-9
    Attached Images
    Jason Minnick
    Sencha Architect Development Team

  5. #5
    Sencha User hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default


    Doing that on Initialize works perfect! Thanks!

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    megwynn is on a distinguished road

      0  

    Default


    I am using 951 architect build and I do not seem to have initialize config option. when I try to add it I get a message that it already exists and therefore can not be added. I tried both the simple and advanced view. I am not sure if this is a bug or the trial version restriction?

  7. #7
    Sencha - Architect Dev Team
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    922
    Vote Rating
    32
    jminnick has a spectacular aura about jminnick has a spectacular aura about

      0  

    Default


    Please provide a code sample.
    Jason Minnick
    Sencha Architect Development Team

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

      0  

    Default I don´t have a initialize config for Map component

    I don´t have a initialize config for Map component


    hello, i´m using Architect Version: 2.2.2 Build: 991
    Release Channel: 2.2.2-stable

    The Map component from the toolbox does not have any initialize config property as you mentioned, how can we use it?

    I tried another solution to center the map.. and it is not easy, also, adding marks is so hard I could not add any !!
    please help

    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


    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 resolved!!

    resolved!!


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