JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="stylesheets/default.css" />

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

<div id="wrapper-map">
    <div id="map-canvas"></div>
</div>

CSS

html { 
    height: 100%;
}

body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
}

#map-canvas { 
    width: 600px;
    height: 700px
}

JavaScript

$(function() {
    
    function renderMap() {

    var myLatlng = new google.maps.LatLng(53.3,-8.216901);
    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    
    arr = new Array();
    polygon = new Array();
    optionarray = new Array();
    nameConnectArray = new Array();
    
    var path = [];
    var pathindex = 0;
    
    
    for (var county in paths) {
        
        var coord = paths[county].coordinates.split(" ");
        
        for (var i = 0; i < coord.length; i++) {
            var coords = coord[i].split(",");
            path.push(new google.maps.LatLng(coords[1], coords[0]));
        }
        arr[pathindex] = path;

        //polygon options
        var options = {
            clickable: false,
            fillColor: paths[county].colour,
            fillOpacity: 0.35,
            geodesic: true,
            map: map,
            paths: new google.maps.MVCArray(arr[pathindex]),
            strokeColor: 'white',
            strokeOpacity: 0.8,
            strokeWeight: .5,
            zIndex: 99,
            clickable: true,
            title: paths[county].name,
            data: paths[county].colour
        }
        optionarray[pathindex] = options;

        polygon[pathindex] = new google.maps.Polygon(optionarray[pathindex]);
        
        google.maps.event.addListener(polygon[pathindex], 'click', function() {
            alert(this.title);
        });
        
        google.maps.event.addListener(polygon[pathindex],"mouseover",function(){
            this.setOptions({ strokeColor: 'yellow', fillColor: "white" });
        });

        google.maps.event.addListener(polygon[pathindex],"mouseout",function(){
            this.setOptions({strokeColor: 'white', fillColor: this.data});
            $('#coatOfArms').removeClass();
        });
        var path = [];
        pathindex++;
 ...