JSFiddle - React, Tailwind, and code Playground

by nosir

HTML

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

CSS

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

JavaScript

var map;

function init() {
    var startLatLng = new google.maps.LatLng(50.124462, -5.539994);

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: startLatLng,
        zoom: 12
    });


    var p1 = new google.maps.LatLng(23.634501, -102.552783);
    var p2 = new google.maps.LatLng(17.987557, -92.929147);
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(p1);
    bounds.extend(p2);
    map.fitBounds(bounds);
    
    var markerP1 = new google.maps.Marker({
        position: p1,
        map: map
    });
    var markerP2 = new google.maps.Marker({
        position: p2,
        map: map
    });
    
    google.maps.event.addListener(map, 'projection_changed', function () {
        var p1 = map.getProjection().fromLatLngToPoint(markerP1.getPosition());
        var p2 = map.getProjection().fromLatLngToPoint(markerP2.getPosition());
        var e = new google.maps.Point(p1.x - p2.x, p1.y - p2.y);
        var m = new google.maps.Point(e.x / 2, e.y / 2);
        
        var angle = Math.atan((p1.x - p2.x)/(p1.y - p2.y));
        
        
        var o = new google.maps.Point(Math.cos(angle), Math.sin(angle));
        
        var curve = 2;
        
        var c = new google.maps.Point(m.x - curve * o.x, m.y +  curve * o.y);
        var curveMarker2 = new google.maps.Marker({
            position: markerP1.getPosition(),
            icon: {
                path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
                scale: 24,
                strokeWeight: 20,
                fillColor: '#993300',
                fillOpacity: 0,
                rotation: 180,
                anchor: new google.maps.Point(0, 0)
            }
        });
        curveMarker2.setMap(map);
        google.maps.event.addListener(map, 'zoom_changed', function () {
            var zoom = map.getZoom();
            var scale = 1 / (Math.pow(2, -zoom));
            var icon = {
                path: "M 0 0 q " + c.x + " " +...