Google Maps API and GeoJSON: How do I create different colored lines with unique properties and infowindows

Question

I am having a problem with GeoJSON and Google Maps API.
How do I plot a MultiLineString with ...
1) Each line having It's own color and
2) Each line having it's own properties and
3) Each line should be clickable and show an info window with it's properties

Samples Javascript:

var dataGEOJSON=[];
function LoadMyGEOJSON(key)
{
    dataGEOJSON[key] = new google.maps.Data();
    dataGEOJSON[key].loadGeoJson('GetLatLngGEOJSON.aspx?key=' + key);
    dataGEOJSON[key].setMap(map);
}

The reason for the array, is that way I can keep track of the keys they loaded, as the user can load or unload the keys from the map in their user interface.

Sample GeoJSON:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Key":"007",
            "Line1":"<this is line 1 desc>",
            "Line2":"<this is line 2 desc>",
            "Line3":"<this is line 3 desc>",
            "Line4":"<this is line 4 desc>",
            "Line5":"<this is line 5 desc>",
            "Line6":"<this is line 6 desc>",
            "Line7":"<this is line 7 desc>"
         },
         "geometry":{
            "type":"MultiLineString",
            "coordinates":[
               [
                  [
                     -79.7066775992172,
                     43.6462189758028
                  ],
                  [
                     -79.7066939830514,
                     43.6461985074393
                  ],
                  [
                     -79.7066378408013,
                     43.6461605607267
                  ],
                  [
                     -79.7066097743239,
                     43.6461403201406
                  ],
                  [
                     -79.7064548987452,
                     43.6460566901385
                  ],
                  [
                     -79.7063956692058,
                     43.6460219372408
                  ]
               ],
               [
                  [
                     -79.7063956692058,
                     43.6460219372408
                  ],
                  [
                     -79.7063852230813,
                     43.646033518772
                  ],
                  [
                     -79.7063166536656,
                     43.6461172032157
                  ],
                  [
                     -79.7064079964431,
                     43.6461815121163
                  ],
                  [
                     -79.7060589374119,
                     43.646518038823
                  ],
                  [
                     -79.7060054211382,
                     43.6465600820263
                  ]
               ],
               [
                  [
                     -79.7060054211382,
                     43.6465600820263
                  ],
                  [
                     -79.7052588394648,
                     43.6471387374653
                  ],
                  [
                     -79.7048261689477,
                     43.6474817773536
                  ],
                  [
                     -79.7043239742464,
                     43.6474733374216
                  ],
                  [
                     -79.7041128202014,
                     43.6476608859429
                  ],
                  [
                     -79.703901284037,
                     43.6478509811517
                  ],
                  [
                     -79.7030237720306,
                     43.6486568653637
                  ],
                  [
                     -79.7029267563095,
                     43.6486965678914
                  ]
               ],
               [
                  [
                     -79.7029267563091,
                     43.6486965678909
                  ],
                  [
                     -79.7028702942784,
                     43.6487267896104
                  ],
                  [
                     -79.7028019515802,
                     43.6487884267869
                  ]
               ],
               [
                  [
                     -79.6949803205847,
                     43.6554816862022
                  ],
                  [
                     -79.6946328513629,
                     43.6552226727517
                  ],
                  [
                     -79.6945439505269,
                     43.6551559442016
                  ]
               ],
               [
                  [
                     -79.6945439505269,
                     43.6551559442016
                  ],
                  [
                     -79.694066895687,
                     43.654797865403
                  ],
                  [
                     -79.6934193769725,
                     43.6543136334174
                  ],
                  [
                     -79.6924271403494,
                     43.6535711706703
                  ],
                  [
                     -79.6920107752268,
                     43.6532605761111
                  ],
                  [
                     -79.6919943721596,
                     43.6532604342567
                  ]
               ],
               [
                  [
                     -79.6919943721591,
                     43.6532604342562
                  ],
                  [
                     -79.6914713751595,
                     43.6536247980162
                  ],
                  [
                     -79.6911279733848,
                     43.6533992300817
                  ]
               ],
               [
                  [
                     -79.6959960003114,
                     43.6400049378117
                  ],
                  [
                     -79.6960571265341,
                     43.6400850012767
                  ],
                  [
                     -79.6961629127738,
                     43.640012603549
                  ],
                  [
                     -79.6962380127401,
                     43.6399612066507
                  ],
                  [
                     -79.6964991971409,
                     43.6401581219518
                  ],
                  [
                     -79.6965504313169,
                     43.6403222661559
                  ]
               ],
               [
                  [
                     -79.6965504313164,
                     43.6403222661554
                  ],
                  [
                     -79.6963411179014,
                     43.6405181683405
                  ]
               ],
               [
                  [
                     -79.6973635087052,
                     43.6393434514529
                  ],
                  [
                     -79.6975152035274,
                     43.6394534198075
                  ],
                  [
                     -79.6974394413309,
                     43.6393984974797
                  ],
                  [
                     -79.6977214702725,
                     43.6396029481089
                  ]
               ],
               [
                  [
                     -79.7037279098659,
                     43.6441816734685
                  ],
                  [
                     -79.7038116627627,
                     43.6442425378655
                  ],
                  [
                     -79.7043663390943,
                     43.6446488071586
                  ],
                  [
                     -79.7048680167224,
                     43.645024186195
                  ],
                  [
                     -79.7053904212546,
                     43.6454260322038
                  ],
                  [
                     -79.7059251921243,
                     43.6458354437457
                  ],
                  [
                     -79.7065612964782,
                     43.6461582999466
                  ],
                  [
                     -79.7065835802603,
                     43.6461492141531
                  ],
                  [
                     -79.7066775992172,
                     43.6462189758028
                  ]
               ],
               [
                  [
                     -79.6973112420145,
                     43.6393143090171
                  ],
                  [
                     -79.6972862146857,
                     43.6393319663604
                  ],
                  [
                     -79.6971872210635,
                     43.6392588377729
                  ],
                  [
                     -79.6968127129063,
                     43.6395272639245
                  ],
                  [
                     -79.6966669835105,
                     43.6395263250713
                  ],
                  [
                     -79.6960609039152,
                     43.6399594999986
                  ]
               ],
               [
                  [
                     -79.6960609039152,
                     43.6399594999986
                  ],
                  [
                     -79.6960181044663,
                     43.639990047741
                  ]
               ],
               [
                  [
                     -79.7032573776668,
                     43.6438035217788
                  ],
                  [
                     -79.7032773647046,
                     43.6438182749637
                  ],
                  [
                     -79.7032968727787,
                     43.6438287137889
                  ]
               ],
               [
                  [
                     -79.6982280590368,
                     43.6399996458065
                  ],
                  [
                     -79.6983123840689,
                     43.6400655275078
                  ],
                  [
                     -79.6988209765837,
                     43.6404574862051
                  ],
                  [
                     -79.6997681798983,
                     43.6411574341786
                  ],
                  [
                     -79.699722618622,
                     43.6411857721075
                  ],
                  [
                     -79.7003863588722,
                     43.641677233397
                  ],
                  [
                     -79.7008842734269,
                     43.6420484764154
                  ],
                  [
                     -79.7014070294285,
                     43.6424381587765
                  ],
                  [
                     -79.7024395226368,
                     43.643210754341
                  ],
                  [
                     -79.7029823771679,
                     43.643602976107
                  ],
                  [
                     -79.7032573776668,
                     43.6438035217788
                  ]
               ]
            ]
         }
      }
   ]
}

This is the first time I am using GeoJSON, so I will need assistance with the GeoJSON format needed for to add the properties and styles. Plus the javascript and Google Map API code. If anyone can provide some code or a link to some resources which give detailed examples, that would be greatly appreciated.

Answer 1

One option would be to process the GeoJSON as it is loaded, creating google.maps.Polyline objects from each section of the line. Use function closure (like is used for markers in the answer to this question, set the position of the infowindow to the first point of the polyline segment.

proof of concept fiddle

code snippet:

var colors = ["#FF0000", "#800000", "#00FF00", "#008000", "#0000FF", " #8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#000080", "#FFFF00", "#808000", "#FF00FF", "#800080", "#00FFFF", "#7FFFD4", "#008080", "#000000"];

var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Create a simple map.
  features = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 14,
    center: {
      lat: 43.65,
      lng: -79.7
    }
  });

  // process the loaded GeoJSON data.
  var bounds = new google.maps.LatLngBounds();
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'MultiLineString') {
      var polys = e.feature.getGeometry().getArray();
      for (var i = 0; i < polys.length; i++) {
        for (var j = 0; j < polys[i].getLength(); j++) {
          var poly = new google.maps.Polyline({
            map: map,
            path: polys[i].getArray(),
            strokeColor: colors[i % colors.length]
          });
          google.maps.event.addListener(poly, 'click', (function(poly, i, feature) {
            return function() {
              infowindow.setContent("polyline " + i+"<br>"+feature.getProperty("Line"+i));
              infowindow.setPosition(polys[i].getAt(0));
              infowindow.open(map);
            }
          })(poly, i, e.feature));
          bounds.extend(polys[i].getAt(j));
        }
      }
      map.fitBounds(bounds);
      map.data.setMap(null);
    } else if (e.feature.getGeometry().getType() === 'GeometryCollection') {
      var polys = e.feature.getGeometry().getArray();
      for (var i = 0; i < polys.length; i++) {
        for (var j = 0; j < polys[i].getLength(); j++) {
          bounds.extend(polys[i].getAt(j));
        }
      }
      map.fitBounds(bounds);
    }
  });
  map.data.addGeoJson(data);
}

google.maps.event.addDomListener(window, 'load', initialize);
var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "Key": "007",
      "Line1": "&lt;this is line 1 desc&gt;",
      "Line2": "&lt;this is line 2 desc&gt;",
      "Line3": "&lt;this is line 3 desc&gt;",
      "Line4": "&lt;this is line 4 desc&gt;",
      "Line5": "&lt;this is line 5 desc&gt;",
      "Line6": "&lt;this is line 6 desc&gt;",
      "Line7": "&lt;this is line 7 desc&gt;"
    },
    "geometry": {
      "type": "MultiLineString",
      "coordinates": [
        [
          [-79.7066775992172,
            43.6462189758028
          ],
          [-79.7066939830514,
            43.6461985074393
          ],
          [-79.7066378408013,
            43.6461605607267
          ],
          [-79.7066097743239,
            43.6461403201406
          ],
          [-79.7064548987452,
            43.6460566901385
          ],
          [-79.7063956692058,
            43.6460219372408
          ]
        ],
        [
          [-79.7063956692058,
            43.6460219372408
          ],
          [-79.7063852230813,
            43.646033518772
          ],
          [-79.7063166536656,
            43.6461172032157
          ],
          [-79.7064079964431,
            43.6461815121163
          ],
          [-79.7060589374119,
            43.646518038823
          ],
          [-79.7060054211382,
            43.6465600820263
          ]
        ],
        [
          [-79.7060054211382,
            43.6465600820263
          ],
          [-79.7052588394648,
            43.6471387374653
          ],
          [-79.7048261689477,
            43.6474817773536
          ],
          [-79.7043239742464,
            43.6474733374216
          ],
          [-79.7041128202014,
            43.6476608859429
          ],
          [-79.703901284037,
            43.6478509811517
          ],
          [-79.7030237720306,
            43.6486568653637
          ],
          [-79.7029267563095,
            43.6486965678914
          ]
        ],
        [
          [-79.7029267563091,
            43.6486965678909
          ],
          [-79.7028702942784,
            43.6487267896104
          ],
          [-79.7028019515802,
            43.6487884267869
          ]
        ],
        [
          [-79.6949803205847,
            43.6554816862022
          ],
          [-79.6946328513629,
            43.6552226727517
          ],
          [-79.6945439505269,
            43.6551559442016
          ]
        ],
        [
          [-79.6945439505269,
            43.6551559442016
          ],
          [-79.694066895687,
            43.654797865403
          ],
          [-79.6934193769725,
            43.6543136334174
          ],
          [-79.6924271403494,
            43.6535711706703
          ],
          [-79.6920107752268,
            43.6532605761111
          ],
          [-79.6919943721596,
            43.6532604342567
          ]
        ],
        [
          [-79.6919943721591,
            43.6532604342562
          ],
          [-79.6914713751595,
            43.6536247980162
          ],
          [-79.6911279733848,
            43.6533992300817
          ]
        ],
        [
          [-79.6959960003114,
            43.6400049378117
          ],
          [-79.6960571265341,
            43.6400850012767
          ],
          [-79.6961629127738,
            43.640012603549
          ],
          [-79.6962380127401,
            43.6399612066507
          ],
          [-79.6964991971409,
            43.6401581219518
          ],
          [-79.6965504313169,
            43.6403222661559
          ]
        ],
        [
          [-79.6965504313164,
            43.6403222661554
          ],
          [-79.6963411179014,
            43.6405181683405
          ]
        ],
        [
          [-79.6973635087052,
            43.6393434514529
          ],
          [-79.6975152035274,
            43.6394534198075
          ],
          [-79.6974394413309,
            43.6393984974797
          ],
          [-79.6977214702725,
            43.6396029481089
          ]
        ],
        [
          [-79.7037279098659,
            43.6441816734685
          ],
          [-79.7038116627627,
            43.6442425378655
          ],
          [-79.7043663390943,
            43.6446488071586
          ],
          [-79.7048680167224,
            43.645024186195
          ],
          [-79.7053904212546,
            43.6454260322038
          ],
          [-79.7059251921243,
            43.6458354437457
          ],
          [-79.7065612964782,
            43.6461582999466
          ],
          [-79.7065835802603,
            43.6461492141531
          ],
          [-79.7066775992172,
            43.6462189758028
          ]
        ],
        [
          [-79.6973112420145,
            43.6393143090171
          ],
          [-79.6972862146857,
            43.6393319663604
          ],
          [-79.6971872210635,
            43.6392588377729
          ],
          [-79.6968127129063,
            43.6395272639245
          ],
          [-79.6966669835105,
            43.6395263250713
          ],
          [-79.6960609039152,
            43.6399594999986
          ]
        ],
        [
          [-79.6960609039152,
            43.6399594999986
          ],
          [-79.6960181044663,
            43.639990047741
          ]
        ],
        [
          [-79.7032573776668,
            43.6438035217788
          ],
          [-79.7032773647046,
            43.6438182749637
          ],
          [-79.7032968727787,
            43.6438287137889
          ]
        ],
        [
          [-79.6982280590368,
            43.6399996458065
          ],
          [-79.6983123840689,
            43.6400655275078
          ],
          [-79.6988209765837,
            43.6404574862051
          ],
          [-79.6997681798983,
            43.6411574341786
          ],
          [-79.699722618622,
            43.6411857721075
          ],
          [-79.7003863588722,
            43.641677233397
          ],
          [-79.7008842734269,
            43.6420484764154
          ],
          [-79.7014070294285,
            43.6424381587765
          ],
          [-79.7024395226368,
            43.643210754341
          ],
          [-79.7029823771679,
            43.643602976107
          ],
          [-79.7032573776668,
            43.6438035217788
          ]
        ]
      ]
    }
  }]
}

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>