JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>

<h1><h1>

<div id="map_canvas" style="width: 300px; height: 300px"></div>

JavaScript

// computeDistanceBetween

var moscow = new google.maps.LatLng(55.400002, 37.900002);

var leningrad = new google.maps.LatLng(59.966667, 30.299999);

var distance = google.maps.geometry.spherical.computeDistanceBetween(
    moscow, leningrad
);


document.querySelector('h1').textContent = (Math.ceil(distance / 1000) + ' km');


// render

var mosMark = new google.maps.Marker({
    position: moscow
});

var lenMark = new google.maps.Marker({
    position: leningrad
});

var myOptions = {
    zoom: 4,
    center: moscow,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var flightPlanCoordinates = [
    moscow, leningrad
];

var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var map = new google.maps.Map(
    document.getElementById('map_canvas'),        
    myOptions
);

mosMark.setMap(map);
lenMark.setMap(map);
flightPath.setMap(map);