google maps API v3 - how to draw dynamic polygons/polylines?

Question

I have 4 days of experience with Google Maps Javascript API and i find their documentation and information sharing confusing at best.

Does anyone have experience or

Answer 1

Take a look at my script for curved lines: http://curved_lines.overfx.net/

Here are the functions that I use:

function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) {

  var LastLat = LatStart;
  var LastLng = LngStart;

  var PartLat;
  var PartLng;

  var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9);
  var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2);

  var OffsetMultiplier = 0;

  if (Horizontal == 1) {
    var OffsetLenght = (LngEnd - LngStart) * 0.1;
  } else {
    var OffsetLenght = (LatEnd - LatStart) * 0.1;
  }

  for (var i = 0; i < Points.length; i++) {
    if (i == 4) {
      OffsetMultiplier = 1.5 * Multiplier;
    }

    if (i >= 5) {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    } else {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    }

    if (Horizontal == 1) {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier;
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i]));
    } else {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i]));
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier;
    }

    curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color);

    LastLat = PartLat;
    LastLng = PartLng;
  }

  curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color);

}

function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) {
  var LineCordinates = new Array();

  LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart);
  LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd);

  var Line = new google.maps.Polyline({
    path: LineCordinates,
    geodesic: false,
    strokeColor: Color,
    strokeOpacity: 1,
    strokeWeight: 3
  }); 

  Line.setMap(map);
}

Here is your html content + initializing script: