JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

CSS

#map {
    width:100%;
    height: 500px;
}

JavaScript

function initialize() {
    
    //map options
    var mapOptions = {   
        zoom: 3,
        center: new google.maps.LatLng(34, 5), 
        disableDefaultUI: true
    };

    // Get the HTML DOM element that will contain the map  
    var mapElement = document.getElementById('map');

    // create map using element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);

    setMarkers(map, officeLocations);

}

var officeLocations = [
    ['Hull', 53.796038, -0.358429, 1],
    ['Flintshire', 53.233976, -3.010447],
    ['Cincinnati', 39.253209, -84.378659],
    ['Charlotte', 35.335253, -80.799018],
    ['Richmond', 37.350462, -77.338516],
    ['Toronto', 43.527606, -79.718703],
    ['Singapore', 1.280916, 103.848052],
    ['China', 23.157447, 113.336177]
];

//set and place the markers
function setMarkers(map, locations)
{
    //set global pin image
    var globalPin = 'assets/img/pin.png';

    for (var i = 0; i < locations.length; i++) {
       
        var office = locations[i];
        var myLatLng = new google.maps.LatLng(office[1], office[2]);
        var infowindow = new google.maps.InfoWindow({content: contentString});
         
        var contentString = 
            '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+
            '<div id="bodyContent">'+ 
            '</div>'+
            '</div>';

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: office[0],
        });

        google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));
    }
}

function getInfoCallback(map, content) {
    var infowindow = new google.maps.InfoWindow({content: content});
    return function() {
            infowindow.setContent(content); 
            infowindow.open(map, this);
        };
}

initialize();