Sencha Touch 2 Map

/**   
 * @Author sai   
 *   
 */ 


Ext.define('SmartMenu.view.contact.Map', {
    extend: 'Ext.Map',

    config: {
    	  t:'',
    	  lat:'',
    	  lng:'',
    	  mapOptions: {
              zoom: 9
          },
    	
        listeners: [
            {
                fn: 'onMapMaprender',
                event: 'maprender'
            }
        ]
    },

    onMapMaprender: function(map, options) {
     var gmap=this.getMap();
      var infoWindow = new google.maps.InfoWindow();
      var title=this.getT();
      infoWindow.setContent(title);
      var c=new google.maps.LatLng( this.getLat(),this.getLng());
      map.setMapCenter(c);
      var marker= new google.maps.Marker({
          position:c,  
          map: gmap,
          title:title,
          draggable: false,
          animation: google.maps.Animation.DROP
          }); 
      	infoWindow.open(gmap, marker);

      	 google.maps.event.addListener(marker, "click", function() {
      	   infoWindow.close();
      	   infoWindow = new google.maps.InfoWindow({
                 map: gmap,
                 position: c,
                 content: title
               });
         });     	
      	
    	  navigator.geolocation.getCurrentPosition(function(position) {
              pos = new google.maps.LatLng(position.coords.latitude,
                                                position.coords.longitude);

                
               var centerMarker= new google.maps.Marker({
                   position: pos,
                   map: gmap,
                   draggable: false,
                   animation: google.maps.Animation.DROP
                   });
               google.maps.event.addListener(centerMarker, "click", function() {
            	   infoWindow.close();
            	   infoWindow = new google.maps.InfoWindow({
             		  title:arrLang[23],
                       map: gmap,
                       position: pos,
                       content: arrLang[24]
                     });
               });
               
               var populationOptions = {
             	        strokeColor: "#FF0000",
             	        strokeOpacity: 0.8,
             	        strokeWeight: 2,
             	        fillColor: "#FF0000",
             	        fillOpacity: 0.35,
             	        map: gmap,
             	        center: pos,
             	        radius: 1000
             	      };
               var cityCircle = new google.maps.Circle(populationOptions);
               var  Target= marker.getPosition();
               var directionsService = new google.maps.DirectionsService();
            	 var directionsDisplay = new google.maps.DirectionsRenderer();  
                directionsDisplay.setMap(gmap);
                var request = {  
                  	    origin:pos,   
                  	    destination:Target,  
                  	    travelMode: google.maps.DirectionsTravelMode.DRIVING  
                  	  };  
                  	  directionsService.route(request, function(result, status) {  
                  	    if (status == google.maps.DirectionsStatus.OK) {  
                  	      directionsDisplay.setDirections(result);  
                  	    }  
                  	  }); 
                  	setTimeout(function(){infoWindow.close();},3000);
             },function(){
             	alert("Error",arrLang[25]);
             });
   
    }

    
    
   
});

var map= Ext.create('SmartMenu.view.contact.Map',
  			{   //id:'Map',
  			    fullscreen: true,
  			    title: map,
  			    t: data.title,
  			    lat: data.lat,
  			    lng: data.lng
  			});
 
var btn = Ext.getCmp('btnFavorites');
        btn.setText('重新定位');
       // btn.setIconCls('locate');
        btn.setHidden(false);
        btn.setHandler(function () {
        		map.fireEvent('maprender', map);
        		}
        		);