psahni · September 30, 2011 16:40
diff --git a/location_map_complex.html b/location_map_complex.html
 <!DOCTYPE html> 
 <html> 

  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title> 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type='text/javascript'>
 //     GLOBAL VARIABLES

       var directionDisplay;
       var directionsService = new google.maps.DirectionsService();
       var directionsDisplay = new google.maps.DirectionsRenderer();
       
       var delhi   = new google.maps.LatLng(28.613889, 77.208889);
       var agra    = new google.maps.LatLng(27.10 ,  78.05);
       var jaipur  = new google.maps.LatLng(26.5534, 75.4925);
       var noida   = new google.maps.LatLng(28.57, 77.32);
       
       var travelCities = [delhi, agra, jaipur]//['New Delhi, Delhi', 'Noida, UP', 'Jaipur, Rajasthan'];
       var iterator = 2; // an iterator for iterating travelCities Array
       var markers = [];
       var route_points = []
       var counter = 0; // a counter to iterate over the markers array 
       var map;
       var bounds;
       var tracker;
        
 //---------------------------------------------------------------------------------------------       
        // 1. Make a map and Point initial location. In our case its 'Delhi'
        // 2. Create a renderer for directions and bind it to the map.
        function initialize(){ 
          var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            center: delhi
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          directionsDisplay.setMap(map);
          markers.push(new google.maps.Marker({
          position: delhi,
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP
          
         }));
        
        setBounds();
       var rendererOptions = {
          map: map
          }
         directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
        
      }
      
       function setBounds(){
            bounds = new google.maps.LatLngBounds(); 
            bounds.extend(delhi)
            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);            
          }
      
      // Remove any existing markers from the map.
      // Clear the array itself
      // iterate over travelCities array to retrive two cities between whose directions to be found
      // Retrieve the directions/route between locations
       
      function calcRoute(){         
         var cityPath = new google.maps.Polyline({
            path: [delhi],
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
         cityPath.setMap(map);
   }
   
   
    function routeCalculator(start, end){
      var start_loc = String(start.lat()) + "," + String(start.lng());  
      var end_loc   = String(end.lat())   + "," +    String(end.lng());
      var last_point;
      var request = {
            origin: start_loc,
            destination: end_loc,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
             
      directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        route_points =  response.routes[0].overview_path;
        bound = null;
        bounds = new google.maps.LatLngBounds();
        bounds.extend(start);
        bounds.extend(end);
        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
        console.log('Second'); 
        setTimeout(function(){ polyPath(counter, start) }, 2000);
       }// end if
     });
    
   /* ;
     var start = end;
     while( iterator < travelCities.length ){
       if(travelCities[iterator]!=undefined){
         setTimeout(function(){ routeCalculator(start, travelCities[iterator]) }, 2000);   
         //routeCalculator(start, travelCities[iterator])
         iterator = iterator + 1;
       }
       else{
         break;
       }
     }*/
   
   }
   
   
   // function to display route on the map after route has been calculated     
   function polyPath(i, prev_point){
    if(route_points[i]!=undefined){ 
        var point = [prev_point, route_points[i]] ;
        var cityPath = new google.maps.Polyline({
            path: point,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 5
          });
        cityPath.setMap(map);
        prev_point = route_points[i];
        counter = counter + 1;
        setTimeout(function(){ polyPath(counter, prev_point )}, 10);
     }
    else{
      iterator = 2;
    }
   }
   
   function drop(){
     routeCalculator(travelCities[0], travelCities[1]);
   }
 //---------------------------------------------------------------------------------------------       

               
    </script>
  </head>

  <body>
    <div id="map_canvas">map div</div>
    <button id = "drop" onclick="drop()">Drop Markers</button>
  </body>

  <script type='text/javascript'>
    window.onload = initialize();calcRoute();
  </script>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type='text/javascript'>
	// GLOBAL VARIABLES

	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var directionsDisplay = new google.maps.DirectionsRenderer();

	var delhi = new google.maps.LatLng(28.613889, 77.208889);
	var agra = new google.maps.LatLng(27.10 , 78.05);
	var jaipur = new google.maps.LatLng(26.5534, 75.4925);
	var noida = new google.maps.LatLng(28.57, 77.32);

	var travelCities = [delhi, agra, jaipur]//['New Delhi, Delhi', 'Noida, UP', 'Jaipur, Rajasthan'];
	var iterator = 2; // an iterator for iterating travelCities Array
	var markers = [];
	var route_points = []
	var counter = 0; // a counter to iterate over the markers array
	var map;
	var bounds;
	var tracker;

	//---------------------------------------------------------------------------------------------
	// 1. Make a map and Point initial location. In our case its 'Delhi'
	// 2. Create a renderer for directions and bind it to the map.
	function initialize(){
	var mapOptions = {
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.TERRAIN,
	center: delhi
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	directionsDisplay.setMap(map);
	markers.push(new google.maps.Marker({
	position: delhi,
	map: map,
	draggable: false,
	animation: google.maps.Animation.DROP

	}));

	setBounds();
	var rendererOptions = {
	map: map
	}
	directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

	}

	function setBounds(){
	bounds = new google.maps.LatLngBounds();
	bounds.extend(delhi)
	map.setCenter(bounds.getCenter());
	map.fitBounds(bounds);
	}

	// Remove any existing markers from the map.
	// Clear the array itself
	// iterate over travelCities array to retrive two cities between whose directions to be found
	// Retrieve the directions/route between locations

	function calcRoute(){
	var cityPath = new google.maps.Polyline({
	path: [delhi],
	strokeColor: "#FF0000",
	strokeOpacity: 1.0,
	strokeWeight: 2
	});
	cityPath.setMap(map);
	}


	function routeCalculator(start, end){
	var start_loc = String(start.lat()) + "," + String(start.lng());
	var end_loc = String(end.lat()) + "," + String(end.lng());
	var last_point;
	var request = {
	origin: start_loc,
	destination: end_loc,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	};

	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	route_points = response.routes[0].overview_path;
	bound = null;
	bounds = new google.maps.LatLngBounds();
	bounds.extend(start);
	bounds.extend(end);
	map.setCenter(bounds.getCenter());
	map.fitBounds(bounds);
	console.log('Second');
	setTimeout(function(){ polyPath(counter, start) }, 2000);
	}// end if
	});

	/* ;
	var start = end;
	while( iterator < travelCities.length ){
	if(travelCities[iterator]!=undefined){
	setTimeout(function(){ routeCalculator(start, travelCities[iterator]) }, 2000);
	//routeCalculator(start, travelCities[iterator])
	iterator = iterator + 1;
	}
	else{
	break;
	}
	}*/

	}


	// function to display route on the map after route has been calculated
	function polyPath(i, prev_point){
	if(route_points[i]!=undefined){
	var point = [prev_point, route_points[i]] ;
	var cityPath = new google.maps.Polyline({
	path: point,
	strokeColor: "#FF0000",
	strokeOpacity: 1.0,
	strokeWeight: 5
	});
	cityPath.setMap(map);
	prev_point = route_points[i];
	counter = counter + 1;
	setTimeout(function(){ polyPath(counter, prev_point )}, 10);
	}
	else{
	iterator = 2;
	}
	}

	function drop(){
	routeCalculator(travelCities[0], travelCities[1]);
	}
	//---------------------------------------------------------------------------------------------


	</script>
	</head>

	<body>
	<div id="map_canvas">map div</div>
	<button id = "drop" onclick="drop()">Drop Markers</button>
	</body>

	<script type='text/javascript'>
	window.onload = initialize();calcRoute();
	</script>

	</html>