loopDirectionMaps

by dannyywhite

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;.js"></script>
<button id='stop'>stop</button>
<button id='start'>start</button>
<div id='count'></div>
<div id="shell">
</div>
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTiEH0mE6dDDJi4mp0L1OWziR-VrhPdWI&sensor=false"></script>

JavaScript

var directionsDisplay;
var map;
var directionsService = new google.maps.DirectionsService();
var stepDisplay = new google.maps.InfoWindow();
var numberedMarker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=___|FE6256|000000";
var countRoute = 0;
var n = 0;
var mapZoom = 12;
var MAX_TIME = 15; //in minutes
var totalPoints = 10
var latCenter = 51.520497;
var lonCenter =  -0.109827;
var centerLatLng = new google.maps.LatLng(latCenter, lonCenter);
var radius = 3000;  //in meters
var travelMode = 'TRANSIT'; // can be TRANSIT, DRIVING, BICYCLING, WALKING

var routeResults = [];
var allFinalPoints = [];
var totalPointsAdjusted = totalPoints;
var randomColorInt = 0;

  
  var mapMarkup = '<div id="map" style="width: 400px; height: 400px;">loading</div>';
  
  //var latlng = new google.maps.LatLng(-34.397, 150.644);
  /*var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };*/
  var makeMap = function(){  
    //window.mapInstance = new //google.maps.Map(document.getElementById("map"), myOptions);
    c += 1;
    document.getElementById("count").textContent = c;
    
    initializeDirections();
    
  };
  
  var c = 0;
  var loop = false;
  
  

  document.getElementById("start").onclick = function(){
    if (!loop){
      // every second, either make or hide the map
      loop = setInterval(function(){
        if (document.getElementById("map")){
          document.getElementById("shell").innerHTML = '';
          
          // important part:
          var old_element = document.getElementById("shell");
          var new_element = old_element.cloneNode(true);
          old_element.parentNode.replaceChild(new_element, old_element);

          delete window.mapInstance;
        } 
          document.getElementById("shell").innerHTML = mapMarkup;
          makeMap();
        
      }, 1000);
    }
  };

  document.getElementById("stop").onclick = function(){
    if (loop){
      clearInterval(loop);
     ...