Results 1 to 6 of 6

Thread: Adding map data to map render

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Do you always have a record sent to updateRecord?

    Also instead of accessing _data property, just use the getter getData()
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
      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
      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
      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
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •