1

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.

jroy
  • 51
  • 1
  • 4

1 Answers1

0

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);
JChap
  • 1,421
  • 9
  • 23
  • Thanks, so seeing as I am building this in Sencha Architect, where Ideally can I implement this code? In a controller? – jroy Mar 16 '16 at 00:05
  • Yes, You can put this in a Controller. – JChap Mar 16 '16 at 00:06
  • Do you know how I can assign the map to a tab panel already established in the views section of my app in architect? Thanks – jroy Mar 17 '16 at 02:55
  • I'm not familiar with Architect. Here is a quick fiddle that i created https://fiddle.sencha.com/#fiddle/17b3. May if you have some code i can help you out. – JChap Mar 17 '16 at 04:17
  • Thanks, with that help I was able to get it working - however there is a bug both in your fiddle and my app where the viewport of the map is not actually centred on the marker (it is slightly off to the lower right). Do you know how to fix this? – jroy Mar 20 '16 at 20:31
  • Okay Updated the Fiddle to Center the Map to Marker. – JChap Mar 21 '16 at 01:17