finalfinal

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" id="lat" value=51.520497>
<input type="text" id="lon" value=-0.109827>
<button onclick="paint()">paint</button>
<div id="map-canvas"></div>
<div class="container">
    <div class="people"></div>
    <canvas id="mapImage" class="map" width="640" height="450">
</div>

CSS

#map-canvas {
    height: 450px;
    width: 640px;
}

JavaScript

var directionsDisplay;
var map;
var directionsService = new google.maps.DirectionsService();
var stepDisplay = new google.maps.InfoWindow();
var totalPoints = 10

var MAX_TIME = 37; //in minutes
//var latCenter = 51.520497;
//var lonCenter =  -0.109827;
//var latCenter = 43.870949;
//var lonCenter = 10.247349;
//var latCenter = 51.512626;
//var lonCenter = -0.148334;
var latCenter = 51.512573;
var lonCenter = -0.148412;

var centerLatLng = new google.maps.LatLng(latCenter, lonCenter);
var travelMode = 'DRIVING'; // can be TRANSIT, DRIVING, BICYCLING, WALKING
var allFinalPoints = [];


var numberedMarker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=___|FE6256|000000";
var n = 0;
var randomColorInt = 0;
var countRoute = 0;


function initialize() {

		var mapZoom = 13;   
    var rr=180;//pixels (respective to zoom)
    
    if(travelMode == 'TRANSIT' || travelMode == 'BICYCLING'){
        if(MAX_TIME>0 && MAX_TIME<7){
            mapZoom = 15;           
            rr = 160;
        }else if(MAX_TIME>6 && MAX_TIME<11){
            mapZoom = 14;            
            rr = 180;
        }else if(MAX_TIME>10 && MAX_TIME<18){
            mapZoom = 13;            
            rr = 220;
        }else if(MAX_TIME>17 && MAX_TIME<24){
            mapZoom = 12;            
            rr = 220;
        }else if(MAX_TIME>23 && MAX_TIME<31){
            mapZoom = 11;            
            rr = 150;
        }else if(MAX_TIME>30 && MAX_TIME<36){
            mapZoom = 11;            
            rr = 180;
        }else if(MAX_TIME>35 && MAX_TIME<41){
            mapZoom = 11;            
            rr = 210;
        }else if(MAX_TIME>40 && MAX_TIME<50){
            mapZoom = 10;            
            rr = 130;
        }else if(MAX_TIME>49 && MAX_TIME<56){
            mapZoom = 10;            
            rr = 210;
        }else if(MAX_TIME>55 && MAX_TIME<61){
            mapZoom = 9;            
            rr = 100;
        }
    }else if(travelMode...