Essential whitespace removed from Ext.map map options

[tmunro]

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:

{    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':

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

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

[honestbleeps]

thanks for the detailed report - we'll look into this shortly!

[honestbleeps]

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!

[tmunro]

Thanks for your reply.
Should something like this work for the initialise function?

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.

[honestbleeps]

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

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

[jminnick]

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

http://www.sencha.com/forum/showthre...map-component!

[tmunro]

That helps a lot. Thanks.

[tavojavi]

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

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


        };
    }


});

[tavojavi]

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!

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


});

[tavojavi]

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

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

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




    }


});