CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2sencha-architectsencha-touch-2.1
jroy
jroy

Reputation: 51

Push map coordinates for each detail view of a list view in Sencha Touch

I am building a Sencha Touch App with Sencha Architect, consisting of a list view with each detail view being a tab panel consisting of various fields of read-only data. So far I have been able to pass records from each object in the list to show in form fields of the tabs. Now I am trying to set up a tab with a Google Map showing the location of a set of longitude and latitude coordinates stored alongside these records for the item.

Can someone please show me how I would go about passing in these values so that for each detail view of an object, the map on this tab renders centred on the given coordinates with a marker showing the location?

I am able to provide current code if it is of benefit.

Many thanks.

Upvotes: 1

Views: 107

Answers (1)

JChap
JChap

Reputation: 1441

You can simply create a map panel and push it to the container. Below is the example.

var lat = record.get('lat'),
    lng = record.get('lng'),
    title = record.get('title');

var mapPanel = Ext.widget('map', {
    flex: 1,
    border: 1,
    useCurrentLocation: false,
    mapOptions: {
        center: new google.maps.LatLng (lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15,
        marker: {title: title}
    },
    listeners: {
        maprender: function() {
            new google.maps.Marker({
                position: new google.maps.LatLng (lat, lng),
                animation: google.maps.Animation.DROP,
                map: this.getMap()
            });
        }
    }
});

// add the panel to the container.
container.add(mapPanel);

Upvotes: 0

Related Questions