CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
MrFirthy
MrFirthy

Reputation: 81

Centering Google Map around points from a store - Sencha Touch 2

I have a map component with Google Maps in a view that I want to dynamically set the center of. It is on a details-style page so data is passed to it when it is loaded so setting the center within the launch function would be preferrable. I keep getting a series of undefined error when trying to reference the map and using Google Maps setCenter() function doesn't work when targeting the Sencha map component. I'm pretty sure using setCenter is the best way to accomplish this but I just can't seem to target and execute it.

Any advice on this would be great, thanks in advance:

Map code (an item inside an Ext.Container):

       {
             xtype: 'map',
             height: 150,
             itemId: 'map',
             width: '100%',
             mapOptions : {
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
             } 
        }

Upvotes: 1

Views: 511

Answers (1)

rixo
rixo

Reputation: 25001

Use the provided setMapCenter method.

You can use a component query to get a reference to your map. If you really can't get it this way, give it an id and use Ext.getCmp(yourId) (not recommended).

Take care that the map has actually been rendered before doing that (put your update logic in a maprender listener).

yourContainer.down('#map').setMapCenter({latitude, longitude});

Upvotes: 1

Related Questions