Sencha Touch 2 App - functional requirement

Question

Have developed an app in Sencha Touch V2.This app contains a Mappa panel where there is a map, this map has been populated with markers which corresponds to the various locations(cafes) that are taken from a json file.

The App Map panel functions as follows:

On a marker click the start and end locations textields pops ups, where the user enters the values for the start and end locations, another click to any of the other markers results in, the directions from start and end locations being plotted onto the map.

We need to implement the following functionality:

We need to facilitate the directions of locations entered in google maps plotted onto the map on a button click and also need to recreate the map instance(refresh map) and place existing markers on another button click(map clear button) so as to create a new instance for the user to find directions for different start and end locations.

Problems that we have are:

1. While defining the handler for the button click resulted in no action being performed(getting directions handler was not functioning).
2. Inorder to recreate the instance of the map, we had set the map to null but that resulted in a map without markers.

Could anyone please help out in accomplishing the tasks for this app in Sencha touch version 2.

Answer 1

Created this kind of application / functionality long time back. You can create a floating formpanel and provide the field entries there for source and destination end points.

Then, you could write the below code on tap of "Get Directions" button,

Code snippet :-

tap: function() {
   var src = Ext.getCmp('srcField');
       var destn = Ext.getCmp('destField');
       var mode = Ext.getCmp('travelMode');
       var request = {
        origin: src.getValue(), 
        destination: destn.getValue(),
        travelMode: mode.getPressedButtons()[0].getText(),
       };

     Ext.Ajax.request({
      url: 'http://maps.googleapis.com/maps/api/directions/json?origin='+src.getValue()+'&destination='+destn.getValue()+'&mode='+mode.getPressedButtons()[0].getText()+'&sensor=false';
          method:'post',

          success : function(response) {
              showDirections(response,request);
          }         
     });

     function showDirections(res,req) {
       var directionsService = new google.maps.DirectionsService();
       var directionsDisplay = new google.maps.DirectionsRenderer();
       var map = Ext.getCmp('googleMapComponentId').getMap();

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