Why angularjs showing the marker and not the routes in google-maps?

Question

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

 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 = '<div class="infoWindowContent">' + info.desc + '<br />' + info.lat + ' E,' + info.long + ' N, </div>'; google.maps.event.addListener(marker, 'click', function(){ infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); infoWindow.open($scope.map, marker); }); $scope.markers.push(marker); } //create route $scope.ChileTrip1=[]; for (k=0;k < cities.length;k++){ $scope.ChileTrip1[k]=new google.maps.LatLng(cities[k].lat,cities[k].long); } //end for (i = 0; i < 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 < $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'); } });

 <!DOCTYPE html> <html ng-app="mapApp"> <head> <meta charset="ISO-8859-1"> <title>Maps in AngularJS</title> <link rel="stylesheet" href="map.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script> <script type="text/javascript" src="map.js"></script> </head> <body> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#home">Home</a></li> <li><a href="#menu1">Menu 1</a></li> <li><a href="#menu2">Menu 2</a></li> <li><a href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div ng-controller="MapController"> <div id="map"></div> <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'"> <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)"> <label id="names" >{{marker.title}}</label></a> </div> </div> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div> <script> $(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); }); </script> </body> </html>

Answer 1

You missed a $scope in the following line:

$scope.traceChileTrip1.setMap($scope.map);

Here is a Plunker of your code updated:

http://plnkr.co/edit/OLquFu3jxdyaGEzjoqty?p=preview

Why angularjs showing the marker and not the routes in google-maps?

Question

1 answers

solution1
0 2015-12-16 08:15:10

Why angularjs showing the marker and not the routes in google-maps?

Question

1 answers

solution1 0 2015-12-16 08:15:10

solution1
0 2015-12-16 08:15:10