Polyline Example

This sample shows to draw a polyline on the map.

Instructions
<script>

  var defaultline = [
    {
      "lat": 33.774085998535156,
      "lng": -118.05077362060547
    }, {
      "lat": 33.774085998535156,
      "lng": -118.0488052368164
    }, {
      "lat": 33.774147033691406,
      "lng": -118.0479507446289
    }, {
      "lat": 33.77436065673828,
      "lng": -118.04551696777344
    }, {
      "lat": 33.7744140625,
      "lng": -118.04496002197266
    }, {
      "lat": 33.774444580078125,
      "lng": -118.0443115234375
    }, {
      "lat": 33.774452209472656,
      "lng": -118.04400634765625
    }, {
      "lat": 33.774444580078125,
      "lng": -118.04363250732422
    }, {
      "lat": 33.7744140625,
      "lng": -118.04322814941406
    }, {
      "lat": 33.774269104003906,
      "lng": -118.04207611083984
    }, {
      "lat": 33.77410888671875,
      "lng": -118.04143524169922
    }, {
      "lat": 33.773895263671875,
      "lng": -118.04075622558594
    }, {
      "lat": 33.773651123046875,
      "lng": -118.04016876220703
    }, {
      "lat": 33.77342224121094,
      "lng": -118.03970336914062
    }, {
      "lat": 33.77311706542969,
      "lng": -118.03916931152344
    }, {
      "lat": 33.77265167236328,
      "lng": -118.03850555419922
    }, {
      "lat": 33.772186279296875,
      "lng": -118.0379409790039
    }, {
      "lat": 33.77198791503906,
      "lng": -118.03766632080078
    }, {
      "lat": 33.768524169921875,
      "lng": -118.03355407714844
    }, {
      "lat": 33.76750946044922,
      "lng": -118.03231048583984
    }, {
      "lat": 33.76433563232422,
      "lng": -118.0285415649414
    }, {
      "lat": 33.763694763183594,
      "lng": -118.0277328491211
    }, {
      "lat": 33.76133728027344,
      "lng": -118.02490234375
    }, {
      "lat": 33.751182556152344,
      "lng": -118.01274871826172
    }, {
      "lat": 33.750816345214844,
      "lng": -118.01234436035156
    }, {
      "lat": 33.74957275390625,
      "lng": -118.0108413696289
    }, {
      "lat": 33.74516296386719,
      "lng": -118.00557708740234
    }, {
      "lat": 33.741844177246094,
      "lng": -118.00157165527344
    }, {
      "lat": 33.739288330078125,
      "lng": -117.99847412109375
    }, {
      "lat": 33.738853454589844,
      "lng": -117.99799346923828
    }, {
      "lat": 33.736419677734375,
      "lng": -117.99492645263672
    }, {
      "lat": 33.73223876953125,
      "lng": -117.98896026611328
    }, {
      "lat": 33.73082733154297,
      "lng": -117.98692321777344
    }, {
      "lat": 33.730430603027344,
      "lng": -117.98633575439453
    }, {
      "lat": 33.72907257080078,
      "lng": -117.98441314697266
    }, {
      "lat": 33.728546142578125,
      "lng": -117.98370361328125
    }, {
      "lat": 33.726478576660156,
      "lng": -117.9806137084961
    }, {
      "lat": 33.72443389892578,
      "lng": -117.97772979736328
    }, {
      "lat": 33.72376251220703,
      "lng": -117.97676849365234
    }, {
      "lat": 33.72264862060547,
      "lng": -117.97532653808594
    }, {
      "lat": 33.722442626953125,
      "lng": -117.9750747680664
    }, {
      "lat": 33.721702575683594,
      "lng": -117.97419738769531
    }, {
      "lat": 33.71842956542969,
      "lng": -117.97025299072266
    }, {
      "lat": 33.71698760986328,
      "lng": -117.96849822998047
    }, {
      "lat": 33.71546173095703,
      "lng": -117.96665954589844
    }, {
      "lat": 33.713966369628906,
      "lng": -117.96479797363281
    }, {
      "lat": 33.710289001464844,
      "lng": -117.96049499511719
    }, {
      "lat": 33.70851135253906,
      "lng": -117.95840454101562
    }, {
      "lat": 33.704627990722656,
      "lng": -117.95370483398438
    }, {
      "lat": 33.70355987548828,
      "lng": -117.9525146484375
    }, {
      "lat": 33.702857971191406,
      "lng": -117.95159912109375
    }, {
      "lat": 33.701942443847656,
      "lng": -117.95014190673828
    }, {
      "lat": 33.701202392578125,
      "lng": -117.94881439208984
    }, {
      "lat": 33.700523376464844,
      "lng": -117.94705963134766
    }, {
      "lat": 33.69806671142578,
      "lng": -117.94123077392578
    }, {
      "lat": 33.69567108154297,
      "lng": -117.9354248046875
    }, {
      "lat": 33.695091247558594,
      "lng": -117.93412780761719
    }, {
      "lat": 33.691368103027344,
      "lng": -117.92509460449219
    }, {
      "lat": 33.68913269042969,
      "lng": -117.91972351074219
    }, {
      "lat": 33.68891143798828,
      "lng": -117.91903686523438
    }, {
      "lat": 33.68843078613281,
      "lng": -117.91749572753906
    }, {
      "lat": 33.68810272216797,
      "lng": -117.91614532470703
    }, {
      "lat": 33.68779754638672,
      "lng": -117.9143295288086
    }, {
      "lat": 33.687744140625,
      "lng": -117.91207122802734
    }, {
      "lat": 33.68772888183594,
      "lng": -117.90747833251953
    }, {
      "lat": 33.68769836425781,
      "lng": -117.90641784667969
    }
  ];

  var redline = [
    {
      "lat": 33.68769836425781,
      "lng": -117.90641784667969
    }, {
      "lat": 33.68742370605469,
      "lng": -117.90309143066406
    }, {
      "lat": 33.68731689453125,
      "lng": -117.89990997314453
    }, {
      "lat": 33.68719482421875,
      "lng": -117.89928436279297
    }, {
      "lat": 33.68701934814453,
      "lng": -117.89881896972656
    }, {
      "lat": 33.686744689941406,
      "lng": -117.89834594726562
    }, {
      "lat": 33.68639373779297,
      "lng": -117.89793395996094
    }, {
      "lat": 33.67987823486328,
      "lng": -117.8922348022461
    }, {
      "lat": 33.67681121826172,
      "lng": -117.88946533203125
    }, {
      "lat": 33.676483154296875,
      "lng": -117.88916015625
    }, {
      "lat": 33.67596435546875,
      "lng": -117.8886947631836
    }, {
      "lat": 33.67552185058594,
      "lng": -117.88826751708984
    }, {
      "lat": 33.673583984375,
      "lng": -117.8865737915039
    }, {
      "lat": 33.67292022705078,
      "lng": -117.88603210449219
    }, {
      "lat": 33.669471740722656,
      "lng": -117.88301849365234
    }, {
      "lat": 33.667686462402344,
      "lng": -117.88151550292969
    }, {
      "lat": 33.667030334472656,
      "lng": -117.88089752197266
    }, {
      "lat": 33.665794372558594,
      "lng": -117.87986755371094
    }, {
      "lat": 33.66474914550781,
      "lng": -117.87866973876953
    }, {
      "lat": 33.66239929199219,
      "lng": -117.87532043457031
    }, {
      "lat": 33.66224670410156,
      "lng": -117.87509155273438
    }, {
      "lat": 33.66065979003906,
      "lng": -117.87279510498047
    }, {
      "lat": 33.655006408691406,
      "lng": -117.8647232055664
    }, {
      "lat": 33.654640197753906,
      "lng": -117.86430358886719
    }, {
      "lat": 33.65399169921875,
      "lng": -117.86366271972656
    }, {
      "lat": 33.6534423828125,
      "lng": -117.86322021484375
    }, {
      "lat": 33.652549743652344,
      "lng": -117.86262512207031
    }, {
      "lat": 33.65208435058594,
      "lng": -117.86239624023438
    }, {
      "lat": 33.65168762207031,
      "lng": -117.86223602294922
    }, {
      "lat": 33.651222229003906,
      "lng": -117.86209869384766
    }, {
      "lat": 33.65069580078125,
      "lng": -117.86197662353516
    }, {
      "lat": 33.65008544921875,
      "lng": -117.86186218261719
    }, {
      "lat": 33.64909362792969,
      "lng": -117.86161041259766
    }, {
      "lat": 33.64398956298828,
      "lng": -117.86046600341797
    }, {
      "lat": 33.64325714111328,
      "lng": -117.86027526855469
    }, {
      "lat": 33.64256286621094,
      "lng": -117.8600845336914
    }, {
      "lat": 33.642051696777344,
      "lng": -117.85989379882812
    }
  ];

  var gssMap = new gssmaps.GSSMap('7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio', 'map');
  var fitBoundsArray = new Array();

  addPolyline();
  addPolylineWithLineOptions();
  fitBoundsArray.push(new gssmaps.GSSLatLng(defaultline[0].lat, defaultline[0].lng));
  fitBoundsArray.push(new gssmaps.GSSLatLng(redline[redline.length - 1].lat, redline[redline.length - 1].lng));
  gssMap.fitBounds(fitBoundsArray);

  function addPolyline() {

    var gssLatLngs = new Array();
    $.each(defaultline, function (idx, value) {
      gssLatLngs.push(new gssmaps.GSSLatLng(value.lat, value.lng));
    });

    gssMap.addPolyline(new gssmaps.GSSPolyline(gssLatLngs));
  }

  function addPolylineWithLineOptions() {
    var gssLatLngs = new Array();

    $.each(redline, function (idx, value) {
      gssLatLngs.push(new gssmaps.GSSLatLng(value.lat, value.lng));
    });

    var lineOptions = new gssmaps.GSSLineOptions('RGB(74, 35, 90)', 5);
    gssMap.addPolyline(new gssmaps.GSSPolyline(gssLatLngs, lineOptions));
  }
</script>