Adding map data to map render

[Tro]

Im having some problem displaying record data inside map render ... on second console log it works perfect but on first it says null... do u have any ideas why ? U can see my code bellow.

                xtype: 'map',
                id:'map',
                flex: 1,
                mapOptions: {
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                },
                listeners: {
                    maprender : function(comp, map){
                        var directionsDisplay = new google.maps.DirectionsRenderer();
                        var directionsService = new google.maps.DirectionsService();
                        directionsDisplay.setMap(map);
                        var data = Ext.getCmp('map');//GET COMPONENT
                        console.log(data._data); //DISPLAY COMPONENT DATA - doesnt work
                        var start = "berlin";
                        var end = "munich";
                        var request = {
                            origin:start, 
                            destination:end,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING,
                        };
                        directionsService.route(request, function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                                var miles = Ext.getCmp('miles'),
                            }
                        });
                        Ext.device.Geolocation.getCurrentPosition({
                            success: function(position) {
                                console.log(data._data); // DISPLAY COMPONENT DATA - works
                                var long = position.coords.longitude,
                                 lat = position.coords.latitude;
                                var marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(lat,long),
                                    title : 'Me',
                                    map: map
                                });
                            },
                            failure: function() {
                                console.log('something went wrong!');
                            }
                        });
                    }

    updateRecord: function(newRecord) {
        if (newRecord) {
            this.down('#map').setData(newRecord.data); //SET DATA TO COMPONENT
        }

And another question would be how to add zoom option to the map? zoomControl: true doesnt work. It shows zoom control but im not able to click on it.

[mitchellsimoens]

Do you always have a record sent to updateRecord?

Also instead of accessing _data property, just use the getter getData()

[Tro]

I moved my map render into updateRecord and it works fine. But now the problem is that map doesnt reset, it shows all previously rendered google routes. I tryed with

   directionsDisplay.setMap(null);
    directionsDisplay =null;

but it doesnt work any suggestions ?

[aleshawebsight]

I too have a problem with maprender function where the markers are not plotted on to the map,cud u please verify the code below the data return [object object] but the data.on('load')..etc does not work.
could you please give me a response asap.
onMymapMaprender: function(map, gmap, options) {


var data = Ext.getStore('BikeL'),marker = [], infowindow = [], dist = [];


alert(data.load());


data.on('load', function () {


data.each(function (rec, idx, cnt) {
alert(rec.get('latitude'));


var latLng = new google.maps.LatLng(rec.get('latitude'), rec.get('longitude'));


marker[idx] = new google.maps.Marker({


map: map,


position: latLng


});
this.markers.push(marker[idx]);


infowindow[idx] = new google.maps.InfoWindow({
content: rec.get('title')
});
google.maps.event.addListener(marker[idx], 'click', function () {
infowindow[idx].open(map, marker[idx]);
if (dist.length === 0) {
dist.push(rec.get('title'));
} else if (dist.length === 1) {
dist.push(rec.get('title'));
} else if (dist.length > 1) {
// need reload map
dist = [];
dist.push(rec.get('title'));
}


if (dist.length === 2) {
var start = dist[0],
end = dist[1],
request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();


directionsDisplay.setMap(map);


directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});




setTimeout(function () {
map.panTo(position);
}, 1000);




}); //closed data selection function/// <reference path="../../contacts.json" />






}); //closed data onLoad


}


});

[Tro]

I am using it like this

   updateRecord: function(newRecord) {
        if (newRecord) {
            this.down('#content').setData(newRecord.data);
            this.down('map').setData(newRecord.data);
        };
        //GET MAP
        var map = this.down('map').getMap();
        //console.log(map);
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();
        //SET map
        directionsDisplay.setMap(map);
        //get data
        var mapData = this.down('map').getData();
        //SET DATA
        var start = mapData.from;
        var end = mapData.to;
        var request = {
            origin:start, 
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var miles = Ext.getCmp('miles'),
                distance = Math.floor(response.routes[0].legs[0].distance.value / 1000),
                minutes = Math.floor(response.routes[0].legs[0].duration.value / 60);
                miles.setHtml("Distance: " + distance + " kilometers.<br/> Time: " + minutes + " minutes.");
            }
        });
        Ext.device.Geolocation.getCurrentPosition({
            success: function(position) {
                var long = position.coords.longitude,
                    lat = position.coords.latitude;
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,long),
                    title : 'Me',
                    map: map
                });
            },
            failure: function() {
                console.log('something went wrong!');
            }
        });
    },