Arc between Google Maps markers

Draw a curved (but _not_ great-circle) arc between points on a Google Map. Adapted from http://stackoverflow.com/a/24575594/647002.

by barbarina

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://fonts.googleapis.com/css?family=Share+Tech+Mono"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.testoPMV{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
}

.testoPMVCenter{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
  text-align: center;
}

.PMV3X20IMGIMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:260px;
}

.PMV3X15IMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:185px;
}

.PMV4X15{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:140px;
}

.PMV3X20IMGIMGverde{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:260px;
}

.linkDX{
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
   
}

.imgFinta{
  background-color: black;
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

.imgVera{
  background-color: black;
  background-image: url("https://s13.postimg.org/dnn00gtwz/image.gif");
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

JavaScript

var map;

var curvature = 0; // how curvy to make the arc

function init() {
  var Map = google.maps.Map,
    LatLng = google.maps.LatLng,
    LatLngBounds = google.maps.LatLngBounds,
    Marker = google.maps.Marker,
    Point = google.maps.Point;

  // This is the initial location of the points
  // (you can drag the markers around after the map loads)
  var pos1 = new LatLng(43.83322764306724, 11.151112093326024);
  var pos2 = new LatLng(43.83322764306724+0.0005, 11.151112093326024+0.0005);

  var bounds = new LatLngBounds();
  bounds.extend(pos1);
  bounds.extend(pos2);

  map = new Map(document.getElementById('map-canvas'), {
    center: bounds.getCenter(),
    zoom: 12
  });
  map.fitBounds(bounds);

  const rettangolo = {
    path: "M -160,-90 160,-90 160,20 -160,20 z",
    strokeColor: "#Fff",
    fillColor: "#fff",
    fillOpacity: 0.5,
  };
  
  var markerP1 = new Marker({
    position: pos1,
    label: "PMV",
    draggable: false,
    map: map,
    visible: true,
  });
  var markerP2 = new Marker({
    position: pos2,
    //label: "2",
    draggable: true,
    map: map,
      icon: rettangolo,    
    //visible: false,
  });
  const infowindow = new google.maps.InfoWindow({
  pixelOffset: 1,
  maxWidth: 300,
    content: '<div class="panel-body" style="padding: 0 15px 0 0;">'+
    '<div class="row" style="margin-top:5px;">'+
        '<div class="col-sm-12" style="display:inline-flex;">'+
    '<div class="PMV3X20IMGIMG">'+
                  '<span class="pull-left" style="margin-right: 10px; margin-left:4px;">'+
                  '<span class="imgFinta">a</span>'+
                  '<img src="https://s13.postimg.org/opwocfvb7/B_UP.gif" style="width: 32px; padding:0px;"  />'+
                  '</span>'+
                  '<span class="testoPMV">'+
                    '<div>SE PIOVE RIDUCI LA</div>'+
                    '<div>VELOCITA\' ! ANCHE</div>'+
                    '<div>SU ASFALTO DRENANTE</div>'+
                  '</span>'+
                 ...