JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<link rel="stylesheet" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<div id="map-canvas"></div>

JavaScript

var poly;
var geodesicPoly;
var marker1, marker2, marker3, marker4;

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(34, -40.605),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(40.71435280, -74.0059731)
    });

    marker2 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(48.8566140, 2.35222190)
    });

    marker3 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(53.3428, -6.2661)
    });

    marker4 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(40.4000, -3.6833)
    });

    var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
    marker2.getPosition());
    map.fitBounds(bounds);


    var geodesicOptions = {
        strokeColor: '#8B0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true,
        map: map
    };

    update(geodesicOptions);
}

function update(geodesicOptions) {
    new google.maps.Polyline(geodesicOptions).setPath([marker1.getPosition(), marker2.getPosition()]);
    new google.maps.Polyline(geodesicOptions).setPath([marker1.getPosition(), marker3.getPosition()]);
    new google.maps.Polyline(geodesicOptions).setPath([marker1.getPosition(), marker4.getPosition()]);
}

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