JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
<div id="map_canvas" style="width:500px; height:400px;"></div>

JavaScript

var spherical;
var north, east, west, south;
var latF = 51.52464566899074, longF = -0.0993490219116211, latT = 51.53126703068856,longT = -0.11415481567382812;
    
function initialize() {
    spherical = google.maps.geometry.spherical;
    
    var F = new google.maps.LatLng(latF, longF); 
    var T = new google.maps.LatLng(latT, longT); 
    var myOptions = {
        zoom: 11,
        center: F,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);

    // A marker at each side of the segment    
	var markerF = new google.maps.Marker({  position: new google.maps.LatLng(latF, longF),  map: map, title: "F"});
	var markerT = new google.maps.Marker({  position: new google.maps.LatLng(latT, longT),  map: map, title: "T"});
    
    // Center on the segment
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(F);
    bounds.extend(T);
    map.fitBounds(bounds);

    // Draw line
    var segmentCoordinates = [F, T ];
    var segment = new google.maps.Polyline({
        path: segmentCoordinates,
        geodesic: true,
        strokeColor: '#00FF00',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });    
    // M is the middle
    var latM = (latF + latT)/2;
    var longM = (longF + longT)/2;
    var M =  new google.maps.LatLng(latM, longM);
	var markerM = new google.maps.Marker({  position: new google.maps.LatLng(latM, longM),  map: map, title: "M"});
    
    // Get direction of the segment
	var heading = spherical.computeHeading(F, T);
    var dist = 200; // distance in meters
	var A = spherical.computeOffset(M, dist, heading+90);
    var perpendicularCoordinates = [M, A ];
    var perpendicular = new google.maps.Polyline({
        path: perpendicularCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });    
   ...