JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

var map;

var curvature = 0.5; // 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(23.634501, -102.552783);
  var pos2 = new LatLng(17.987557, -92.929147);

  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);

  var markerP1 = new Marker({
    position: pos1,
    label: "1",
    draggable: false,
    map: map
  });
  var markerP2 = new Marker({
    position: pos2,
    label: "2",
    draggable: false,
    map: map
  });
  drawCurve(pos2, pos1, map);
  drawCurve(new google.maps.LatLng(19.4326077, -99.133208), new google.maps.LatLng(19.173773, -96.1342240), map);
}

google.maps.event.addDomListener(window, 'load', init);

function drawCurve(P1, P2, map) {
  var lineLength = google.maps.geometry.spherical.computeDistanceBetween(P1, P2);
  var lineHeading = google.maps.geometry.spherical.computeHeading(P1, P2);
  var lineHeading1, lineHeading2;
  if (lineHeading < 0) {
    lineHeading1 = lineHeading + 45;
    lineHeading2 = lineHeading + 135;
  } else {
    lineHeading1 = lineHeading + -45;
    lineHeading2 = lineHeading + -135;
  }
  var pA = google.maps.geometry.spherical.computeOffset(P1, lineLength / 2.2, lineHeading1);
  var pB = google.maps.geometry.spherical.computeOffset(P2, lineLength / 2.2, lineHeading2);

  var curvedLine = new GmapsCubicBezier(P1, pA, pB, P2, 0.01, map);
}


// google.maps.event.addDomListener(window, 'load', initialize);
// original Belzier Curve code from nicoabie's answer to this question on StackOverflow:
//...