Curved line overlay on top of Google map

Question

I see we can draw polylines and circles on top of Google map by this API https://developers.google.com/maps/documentation/javascript/shapes Is there any way to draw a curved line on top of a Google map?

Answer 1

Yes you can draw by following js code,

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;

you can follow this example :

[https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/polyline-simple/jsfiddle][1]