I placed my marker on the map and expected to see connecting routes between them, but only the markers are visible without any routes. This is quite confusing.
var cities = [
{
place : 'Universal Studio',
desc : 'A place full of fun',
lat : 34.135557,
long : -118.354639
},
{
place : 'Beverly Hill',
desc : 'Shopping Center',
lat : 34.073572,
long : -118.399767
},
{
place : 'Staples Center',
desc : 'City of Joy...',
lat : 34.043284,
long : -118.267254
},
];
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);
}
$scope.ChileTrip1=[];
for (k=0;k < cities.length;k++){
$scope.ChileTrip1[k]=new google.maps.LatLng(cities[k].lat,cities[k].long);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$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);
});
}
$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>