Polyline Example
This sample shows to draw a polyline on the map.
Code review
<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>