JSFiddle - React, Tailwind, and code Playground

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 marker = new google.maps.Marker({
        position: new google.maps.LatLng(50.124462, -5.539994),
        map: map,
        icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(4, 4)
        }
    });

    var p1 = new google.maps.Point(0, 5);
    var p2 = new google.maps.Point(5, 5);
    var e = new google.maps.Point(p2.x - p1.x, p2.y - p1.y);
    var m = new google.maps.Point(e.x / 2, e.y / 2);
    var o = new google.maps.Point(0, 7);
    var c = new google.maps.Point(m.x + o.x, m.y + o.y);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(50.124462, -5.539994),
        icon: {
            path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
            scale: 8,
            strokeWeight: 2,
            fillColor: '#009933',
            fillOpacity: 0,
            rotation: 180,
            anchor: new google.maps.Point(0, 0)
        },
    });
    marker.setMap(map);
    google.maps.event.addListener(map,'zoom_changed',function() {
        var zoom = map.getZoom();
        var scale = 1/(Math.pow(2,9 - zoom));
        var icon = {
            path: "M 0 0 q "+c.x+" "+c.y+" "+e.x+" "+e.y,
            scale: scale,
            strokeWeight: 2,
            fillColor: '#009933',
            fillOpacity: 0,
            rotation: 180,
            anchor: new google.maps.Point(0,0)
        };
        marker.setIcon(icon);
    });    
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(50.124461,-5.553726),
        map: map,
        draggable: true,
        icon: {url:"https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
          ...