title: Why angularjs showing the marker and not the routes in google-maps?
body: <p>After place my marker on the map , i should also let them connect together and look like routes 
  However , the result just show the marker , and no routes at all 
  It is so confusing .
  Actually , i set the map at first , and add marker and route to the map
  However , it only show mark</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cities = [
                {
                    place : 'Universal Studio',
                    desc : 'A place full of fun',
                    lat : 34.135557,
                    long : -118.354639
                },
                {
                    place : 'Beverly Hill',
                    desc : 'Shooping Center',
                    lat : 34.073572,
                    long : -118.399767
                },
                {
                    place : 'Staples Center',
                    desc : 'City of Joy...',
                    lat : 34.043284,
                    long : -118.267254
                },
                /*{
                    place : 'Mumbai',
                    desc : 'Commercial city!',
                    lat : 19.000000,
                    long : 72.90000
                },
                {
                    place : 'Bangalore',
                    desc : 'Silicon Valley of India...',
                    lat : 12.9667,
                    long : 77.5667
                }*/
            ];
  var roadroute=[
               
  
  
  
  
  
             ];
      
      
  
            //Angular App Module and Controller
            var mapApp = angular.module('mapApp', []);
            mapApp.controller('MapController', function ($scope) {
                
                var mapOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(34.090655,-118.339585),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
  
                $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
                $scope.markers = [];
                
                var infoWindow = new google.maps.InfoWindow();
                
                var createMarker = function (info){
                    
                    var marker = new google.maps.Marker({
                        map: $scope.map,
                        position: new google.maps.LatLng(info.lat, info.long),
                        title: info.place
                    });
                    marker.content = '&lt;div class="infoWindowContent"&gt;' + info.desc + '&lt;br /&gt;' + info.lat + ' E,' + info.long +  ' N, &lt;/div&gt;';
                    
                    google.maps.event.addListener(marker, 'click', function(){
                        infoWindow.setContent('&lt;h2&gt;' + marker.title + '&lt;/h2&gt;' + 
                          marker.content);
                        infoWindow.open($scope.map, marker);
                    });
                    
                    $scope.markers.push(marker);
                    
                }
  
                //create route
       
      
     $scope.ChileTrip1=[];
              for (k=0;k &lt; cities.length;k++){
      
      $scope.ChileTrip1[k]=new google.maps.LatLng(cities[k].lat,cities[k].long);
      
      
      
     }
  
              //end     
                
                for (i = 0; i &lt; cities.length; i++){
                    createMarker(cities[i]);
                }
       
       
       //add route
      $scope.traceChileTrip1=new google.maps.Polyline({
      path:$scope.ChileTrip1,
      strokeColor:"blue",
      strokeOpacity:1.0,
      strokeWeight:2
       
       });
       $scope.service1 = new google.maps.DirectionsService(),$scope.traceChileTrip1, snap_path1 = [];
               
       
       $scope.traceChileTrip1.setMap(map);
      
      
      for (j = 0; j &lt; $scope.ChileTrip1.length - 1; j++) {
                         $scope.service1.route({
                              origin: $scope.ChileTrip1[j],
                              destination: $scope.ChileTrip1[j + 1],
                              travelMode: google.maps./*Directions*/TravelMode.DRIVING
                              }, function (result, status) {
                                    if (status == google.maps.DirectionsStatus.OK) {
                                        snap_path1 = snap_path1.concat(result.routes[0].overview_path);
                                        $scope.traceChileTrip1.setPath(snap_path1);
                                    } else console.log("Directions request failed: " + status);
                         });
                       }
      
      
      
       
       
       //end
  
                $scope.openInfoWindow = function(e, selectedMarker){
                    e.preventDefault();
                    google.maps.event.trigger(selectedMarker, 'click');
                }
  
            });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="mapApp"&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Maps in AngularJS&lt;/title&gt;
  &lt;link rel="stylesheet" href="map.css"&gt;
  
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="map.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h2&gt;Dynamic Tabs&lt;/h2&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#menu3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="tab-content"&gt;
      &lt;div id="home" class="tab-pane fade in active"&gt;
        &lt;div ng-controller="MapController"&gt;
           &lt;div id="map"&gt;&lt;/div&gt;
           &lt;div id="repeat" ng-repeat="marker in markers | orderBy : 'title'"&gt;
              &lt;a id="country_container" href="#" ng-click="openInfoWindow($event, marker)"&gt;
              &lt;label id="names" &gt;{{marker.title}}&lt;/label&gt;&lt;/a&gt;
           &lt;/div&gt;
     
     
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menu1" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 1&lt;/h3&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="menu2" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 2&lt;/h3&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="menu3" class="tab-pane fade"&gt;
        &lt;h3&gt;Menu 3&lt;/h3&gt;
        &lt;p&gt;Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $(".nav-tabs a").click(function(){
          $(this).tab('show');
      });
  });
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>