Iscrtavanje SVG na gMapi

[mslavko]

Ovaj kod ovde: https://coderwall.com/p/zb_zdw radi to sto meni treba ali ne bas savrseno tj. ja sam isti takav kod napisao medjutim postoje odredjeni pravci, distance, gde ne radi bas najbolje pa sam resio da integrisem algoritam koji sam nasao jer je on perfektno resenje.

Takodje ovaj kod:

response.routes[0].overview_path;

vraca niz tacaka (lat,lng) sa kojim se konstruise driving direction tj linija izmedju dve tacke

Ovaj algoritam zahteva da se kao ulazni parametar postave ove tacke linija a kao izlazni se dobijaju tacke sa kojima se konstruise poligon.


Sve ovo samo moram da prikazem na mapi pa sam sada uradio ovako:

http://jsbin.com/uTATePe/21 - DEMO
KOD:

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      
      function draw() {
  var polygons = response.routes[0].overview_path; 
  var scale = 100;
  reverse_copy(polygons);
  polygons = scaleup(polygons, scale);
  var cpr = new ClipperLib.Clipper();
  var delta = 25;
  var joinType = ClipperLib.JoinType.jtRound;
  var miterLimit = 2;
  var AutoFix = true;
  var svg, offsetted_polygon,
  cont = document.getElementById('map-canvas');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  console.log(JSON.stringify(offsetted_polygon));
  svg = polys2path(offsetted_polygon, scale);

//Sada kada sam dobio tacke za poligon SVG pokusavam da nacrtam na mapi
         crtamPoligon= new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  crtamPoligon.setMap(map);
        
}
// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}

function reverse_copy(poly) {
	// Make reverse copy of polygons = convert polyline to a 'flat' polygon ...
  var k, klen = poly.length, len, j; 
  for (k = 0; k < klen; k++) {
    len = poly[k].length;
    poly[k].length = len * 2 - 2;
    for (j = 1; j <= len - 2; j++) {
      poly[k][len - 1 + j] = {
        X: poly[k][len - 1 - j].X,
        Y: poly[k][len - 1 - j].Y
      }
    }
  }
}

U konzoli u mom browseru (chrome) nema nikakvih gresaka, a opet ne radi

A tacke koje dobijam od google directions-a prikaz u konzoli izgleda ovako:

console.log(tacke)
[N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N…]
[0 … 99]
0: N
lb: 41.87811000000001
mb: -87.62979000000001
__proto__: N
1: N
2: N
3: N
4: N
5: N
6: N
7: N
8: N
9: N
10: N
11: N
12: N
13: N
14: N
15: N
16: N
17: N
18: N
19: N
20: N
21: N
22: N
23: N
24: N
25: N
26: N
27: N
28: N
29: N
30: N
31: N
32: N
33: N
34: N
35: N
36: N
37: N
38: N
39: N
40: N
41: N
42: N
43: N
44: N
45: N
46: N
47: N
48: N
49: N
50: N
51: N
52: N
53: N
54: N
55: N
56: N
57: N
58: N
59: N
60: N
61: N
62: N
63: N
64: N
65: N
66: N
67: N
68: N
69: N
70: N
71: N
72: N
73: N
74: N
75: N
76: N
77: N
78: N
79: N
80: N
81: N
82: N
83: N
84: N
85: N
86: N
87: N
88: N
89: N
90: N
91: N
92: N
93: N
94: N
95: N
96: N
97: N
98: N
99: N
[100 … 199]
[200 … 208]
length: 209
__proto__: Array[0]

Hvala na savetima