Iscrtavanje SVG na gMapi

[mslavko]

Unapred se izvinjavam sto sam ovo pitanje vec postavio samo sa drugim kodom, ali zelim da bolje objasnim situaciju i postavim bolje pitanje


Pronasao kod-algoritam koji moze da iscrta polygon oko linije. U mom slucaju linija mora da bude google driving direction. Kod koji pravi offset poligon na osnovu linije: http://jsbin.com/oVIcowo/1/edit

Ovde kao sto vidite pravi se poligon na osnovu niza tacaka:

Kôd:

function draw() {
  var polygons = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y":165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X":292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245},{"X":417,"Y":248}]]; 
  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('svgcontainer');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  //console.log(JSON.stringify(offsetted_polygon));
  
  // Draw red offset polygon
  svg = '<svg style="margin-top:10px;margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="540" height="340">';
  svg += '<path stroke="red" fill="red" stroke-width="2" stroke-opacity="0.6" fill-opacity="0.2" d="' + polys2path(offsetted_polygon, scale) + '"/>';
  
  //Draw blue polyline
  svg += '<path stroke="blue" stroke-width="3" d="' + polys2path(polygons, scale) + '"/>';
  svg += '</svg>';
  
      cont.innerHTML += svg;
}
// 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
      }
    }
  }
}

Ja sam u mom primeru jednostavno zameio varijablu polygon sa tackama na ruti koje dobijam od googla sa

response.routes[0].overview_path;

pa sam ondak napisao ovako:

Kôd:

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      
      function draw() {
  var polygons = response.routes[0].overview_path;
//OVDE SAM JEDNOSTAVNO DODAO OSTATAK KODA I PODESIO DA SE ISCRTAVA SVG NA ID MAP-CANVAS

a ostali deo koda dodao : http://jsbin.com/uTATePe/9/edit

Medjutim opet nemogu da iscrtam poligon oko rute iako u gore pomenutom primeru sve radi savrseno. Kako da primenim ovo na google mape? Kako da iscrtam polygon oko rute na ID MAP-CANVAS?

U konzoli nema gresaka.