Capt. Horatio T.P. Webb

Using Google Maps -- Part IV
Drawing a path between Multiple Markers
Spring 2015
Last Updated 12PM 1/6/2015

Once we have the basic Google map and a multiple markers on a web page (as shown in Part III), we can now draw a path between the markers as they are placed on the map.

Drawing the Path

To have Google maps draw a path between markers, we need to store the lat/lng values as the markers are placed on the map, then connect the lat/lng co-ordinates when we are finished. Our data for this example will be the classroom locations of a hypothetical student at U of H. Our data is in a global array named class_schedule. We will start off in the morning in our dorm room at Cougar Village, have two morning classes, lunch at the University Center, and three afternoon classes and then home to the dorm. So each leg of our journey has: a tool tip string that states the course, time, location; latitude; longitude; marker letter;and marker color:

  var class_schedule =[
  ['Dorm Room, 8:00, T Th, Cougar Villaqe (CV)',            29.717927, -95.343292,'D','ff0000'],
  ['PSYC 1300, 8:30, T Th, 102 Social Work (SW)',           29.722805, -95.343931,'P','66ff66'],
  ['MIS 3300, 10AM, T Th, 150 Melcher Hall (MH)',           29.720965, -95.339521,'M','dd0000'],
  ['Lunch, 11:30, T Th, University Center (UC)',            29.720284, -95.340803,'L','00bb00'], 
  ['SOC 1300,1:00, T Th,203 Science and Engineering (SEC)', 29.722980, -95.345960,'S','bbbb00'],
  ['ENGL 1300,2:30, T Th, 203 Agnes Arnold Hall (AH)',      29.722185, -95.344113,'E','880000'],
  ['HIST 1377,4:00, TT h, 104 McElhinney Hall (M)',         29.721048, -95.346554,'H','ff0000'],
  ['Dorm Room, 5:50, T Th, Cougar Villaqe (CV)',            29.717927, -95.343292,'D','ff0000']
  ];

In this example we will use a globaL array named daily_Path to store the lat/lng values like this:

     var daily_Path=[];

Then inside our marker loop we will store each marker lat/lng like this:

     for (i=0; i  < class_schedule.length; i++)
         {
          var thisLatLng = new google.maps.LatLng(class_schedule[i][1], class_schedule[i][2]);
          .
          .
          .
          daily_Path[i]=new google.maps.LatLng(class_schedule[i][1], class_schedule[i][2]); 
          .
          .
         }

Once the markers have been placed on the map (i.e., after the loop ends) we can draw the path connecting the marker locations using Polyline like this:

     var myDay=new google.maps.Polyline({
            path: daily_Path,
            strokeColor: '#ff0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
            });
     myDay.setMap(map);

We set:

the "path" is set with the array of lat/lng values we accumulated in the loop (the array daily_Path).
the "strokeColor" defines the color of the path line (in this case the hexadecimal color red: #ff0000),
the "strokeOpacity" is set to 1.0 (i.e., completely opaque)
the "strokeWeight" which is the width of the path line (set to 2 pixels wide)

Then we draw the path on the map by saying:

       myDay.setMap(map);

The resulting map IS:

The Code

The javascript code for the data and the functions initialize() and create_marker() is:

Done!

Part V -- Google Map (big version -- not assigment #2 material)

Assignment #2