Map Component Map Options

[allisterf]

Finding it difficult to see how to code the map options correctly to be able to specify any particular location. Have tried adding:

{ center: new google.maps.LatLng(37.381592, -122.135672), zoom : 12 }

but not working.

Can anyone point in the right direction?

Thanks
Allister

[aconran]

Use an override or event handler to set configurations that need JavaScript expressions.

[allisterf]

Hi Aaron - and thanks for the reply.

I guess I'm a bit confused. In Sencha 2.1.0, a map component has now been included, with a full range of configuration options, including mapOptions which I understood was the place to add coordinates. How is it that the primary requirement of being able to set coordinates in a map can't actually be achieved in that config? Or am I not understanding it properly?

The thing about overrides, is that there is little documentation of how to do them. Mostly in the forum an overrides question gets the reply 'you shouldn't be using them, and they'll be deprecated soon anyway'!

However, - even with the map configuration options -maps in sencha still need an override to work, can you give some guidance...maybe some code and an explanation of where it needs to go?

Thanks
Allister

[aconran]

The config property grid does not support JavaScript expressions. When you are instantiating an instance of a google class this is a JS expression.

In touch you could also override the initialize method and invoke this.setMapOptions();

[allisterf]

I wish I could say I'd solved this, but I'm afraid not...

I've never used overrides before. If the mapOptions in the map component's config doesn't actually allow anything than showing Cupertino, could you clarify. Would it be possible to include a simple architect project to show what you mean when you indicate the use of an override to set different lat and long for a map?

Allister

[allisterf]

Okay - update on this.

Got it working at last with:

Ext.define('MyApp.view.override.MyMap', {
    override: 'MyApp.view.MyMap',
    config: {
       mapOptions : {
                center : new google.maps.LatLng(51.5006, -0.1246),  //nearby London
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
            }
    }
    
});

I was just putting the options directly rather than wrapping them in a 'config' item. You also have to remember that the updated map will NOT show on the canvas - you have to preview or publish to see the results.

Allister