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="width:750px; height:450px; border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    create_marker(map.getCenter(), "num1", "descript1", "cat1", "1/1/2011", false, true, true, "");
    create_marker(new google.maps.LatLng(37.4, -122.2), "num2", "descript2", "cat2", "1/2/2011", false, true, true, "");

}
google.maps.event.addDomListener(window, "load", initialize);

function create_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath) {
    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable: DragAble,
        title: eName
        /*,
        icon: iconPath */
    });

    // Content to be displayed in event InfoWindows
    var eventContent = $('<div class="event-details">' + '<h4 class="event-name">' + eName + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + eDate + '</p></span>' +
        '<p class="event-description">' + eDesc + '</p>' +
        '<button type="button" name="remove-event" class="remove-event btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>' +
        '</div>');

    google.maps.event.addListener(marker, 'click', function () {
        //set the content of infoWindow
        infowindow.setContent(eventContent[0]);
        infowindow.open(map, marker);
    });
}