1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default Help with Google Map Driving Directions

    Help with Google Map Driving Directions


    Been struggling with this for a bit, and if you can help it would be really appreciated!


    I'm successfully rendering a google map using an override, but am trying to figure out how to display the deriving directions - though to be honest I'm not even sure what's meant to look like on the screen. This is what I have so far in my map override.


    Code:
    Ext.define('MyApp.view.override.MyMap', {
        override: 'MyApp.view.MyMap',
    config: {
                       mapOptions : {
                    showAnimation: 'fadeIn',
                    center : new google.maps.LatLng(52.858851, -3.060626),  //nearby London
                    zoom : 15,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
    
    
                listeners: {
                    maprender: function(comp, map, options) {
                        var marker = new google.maps.Marker({
                            map : map,
                            position : map.center,
                            animation: google.maps.Animation.DROP,
                            title : "Place"
                        });
                  infowindow = new google.maps.InfoWindow({
                    content: '<span style="font-weight:bolder">Address:</span> Address iNfo </div> <div style="margin-top:4px;padding-top:4px"> <span style="font-weight:bolder;margin-right:4px">Phone:</span>01691 670970 </div>'
                       });
                  google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                      });
                 
    
    
          navigator.geolocation.getCurrentPosition(function(position) {
                    var start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                    var end = new google.maps.LatLng(52.858851, -3.060626);    
                
                    var directionsDisplay = new google.maps.DirectionsRenderer();
                    var directionsService = new google.maps.DirectionsService();
                    
                    directionsDisplay.setMap(map);
                                            
                    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);
                        }
                    });        
            });     
          
                    }
                }
        }
        
    });
    Is this correct to find the geolocation of my current position?
    var start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);


    Ayway, the may still renders with its marker and infowindow, even with the directionService section, but I'm not getting anything other than that showing on the screen.


    Thanks for your help.
    Allister

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Jan 2009
    Location
    Frederick, Maryland
    Posts
    805
    Vote Rating
    31
    jminnick has a spectacular aura about jminnick has a spectacular aura about

      0  

    Default


    Without looking too deeply into your code; are you using the useCurrentLocation config?

    Code:
    useCurrentLocation: true
    Jason Minnick
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Okay - this is getting a little strange.


    One moment my override code for centring a map and placing a marker at the latlng was working, and then it suddenly stops…?


    What is weird is that I have two separate projects. In one project, the exact same code does what it's supposed to but in the second it doesn't. In fact, if I start a completely new project and add a map in the normal way and create an override in the normal way, and even copy the existing working config code from the working project, the map shows but the pin not.


    What's going on?


    Are there bugs with copying and pasting code with the SA editor?


    My override code for the amp is below. Can you confirm if you get the same problems, or suggest how to overcome the strange behavior?


    Thanks
    Allister


    Code:
    Ext.define('MyApp.view.override.MyMap', {
        override: 'MyApp.view.MyMap',
     config: {
                       mapOptions : {
                    showAnimation: 'fadeIn',
                    center : new google.maps.LatLng(52.858851, -3.060626),  //nearby London
                    zoom : 15,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
    
    
                listeners: {
                    maprender: function(comp, map) {
                        var marker = new google.maps.Marker({
                            map : map,
                            position : map.center,
                            animation: google.maps.Animation.DROP,
                            title : "Place "
                        });
                  infowindow = new google.maps.InfoWindow({
                    content: '<span style="font-weight:bolder">Address:</span> Address info</div> <div style="margin-top:4px;padding-top:4px"> <span style="font-weight:bolder;margin-right:4px">Phone:</span>Phone info </div>'
                       });
                  google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                      });
                  
    
    
                        }
                }
        }
    });

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Hi there Jason - still trying to figure my way through this. I resolved the problems with markers on maps that has something to do with the sencha touch library. For me at least sencha-touch-2.0.1.1 is okay but later versions do not work to show a map marker. Not sure why. A bug?

    That aside, I'm still trying to load map directions by getting them to display in a panel. This is my code, but I don't get any directions from start to end point showing. If there is a simple example somewhere of how this is done, could you point me to it?

    Thanks
    Allister

    Code:
    Ext.define('MyApp.view.override.MyMap', {
        override: 'MyApp.view.MyMap',
        
    config: {
                       mapOptions : {
                    showAnimation: 'fadeIn',
                    center : new google.maps.LatLng(51.858851, -3.060626),  //nearby London
                    zoom : 15,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
        
        listeners: {
            maprender: function(comp, map) {
                        var marker = new google.maps.Marker({
                            map : map,
                            position : map.center,
                            animation: google.maps.Animation.DROP,
                            title : "The Walls Restaurant"
                        });
                  infowindow = new google.maps.InfoWindow({
                    content: '<span style="font-weight:bolder">Address:</span> The Walls Restaurant, Welsh Walls, Oswestry, SY11 1AW </div> <div style="margin-top:4px;padding-top:4px"> <span style="font-weight:bolder;margin-right:4px">Phone:</span>01691 670970 </div>'
                       });
                  google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                      });
           
    
    
          navigator.geolocation.getCurrentPosition(function(position) {
                    var start = new google.maps.LatLng(5.858851, -3.060626); 
                    var end = new google.maps.LatLng(52.858851, -3.060626);    
                
                    var directionsDisplay = new google.maps.DirectionsRenderer();
                    var directionsService = new google.maps.DirectionsService();
                    
                    directionsDisplay.setMap(map);
                                            
                    var request = {
                        origin:start, 
                        destination:end,
                        useCurrentLocation: true,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
                                                        
                    directionsService.route(request, function(result, status) {                                                    
                        if (status == google.maps.DirectionsStatus.OK) {
                         directionsRenderer.setPanel(document.getElementById('map-directions'));
                            directionsRenderer.setDirections(result);
                        }
                    });        
          });          
    
    
    
    
                  
    
    
                        }
                }
        }
    });
    I have an existing panel with the correct id

    config: {
    items: [
    {
    xtype: 'container',
    title: 'Tab 1',
    layout: {
    type: 'vbox'
    },
    items: [
    {
    xtype: 'mymap',
    height: 300,
    itemId: 'mymap'
    },
    {
    xtype: 'panel',
    height: 200,
    id: 'map-directions'
    }
    ]
    },

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."