<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller("PolylineComplexCtrl", function(NgMap) {
var vm = this;
vm.path = [];
vm.addMarkerAndPath = function(event) {
vm.path.push([event.latLng.lat(), event.latLng.lng()]);
};
});
</script>
</head>
<body ng-controller="PolylineComplexCtrl as vm">
<ng-map zoom="7" center="41.879535, -87.624333" on-click="vm.addMarkerAndPath()">
<shape ng-if="vm.path.length" name="polyline" id="foo"
path="{{vm.path}}"
stroke-color="#FF0000"
stroke-opacity="1.0"
stroke-weight="3">
</shape>
</ng-map>
</body>
</html>