1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    Tro is on a distinguished road

      0  

    Default Unanswered: Adding map data to map render

    Unanswered: Adding map data to map render


    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.

    Code:
                    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!');
                                }
                            });
                        }

    Code:
        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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Do you always have a record sent to updateRecord?

    Also instead of accessing _data property, just use the getter getData()
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    Tro is on a distinguished road

      0  

    Default


    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
    Code:
       directionsDisplay.setMap(null);
        directionsDisplay =null;
    but it doesnt work any suggestions ?

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    aleshawebsight is on a distinguished road

      0  

    Default


    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


    }


    });

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    Tro is on a distinguished road

      0  

    Default


    I am using it like this
    Code:
       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!');
                }
            });
        },

  6. #6
    Sencha User
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
    senchabeginner is on a distinguished road

      0  

    Default


    Hi, i also facing the same problem..
    So , does this code work for getting the new long and lat value after reset?