JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://jp.igniteui.com/js-data/ig-offices"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<script id="customTooltip" type="text/x-jquery-tmpl">
        <table id="customTable2" >
            <tr><th colspan="2">${item.Name}</th></tr>
            <tr>
                <td>オフィス タイプ:</td>
                <td>${item.Type}</td>
            </tr>
        </table>
    </script>

<div>
        <div id="map"></div>
    </div>

CSS

#customTable2
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        #customTable2 td, #customTable2 th
        {
            font-size: 9px;
            border: 1px solid #2d87cb;
            padding: 3px 7px 2px 7px;
        }
        #customTable2 th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #2d87cb;
            color: #ffffff;
        }

JavaScript

$(function () {
            $("#map").igMap({
                width: "700px",
                height: "500px",
                overviewPlusDetailPaneVisibility: "visible",
                overviewPlusDetailPaneBackgroundImageUri: "https://jp.igniteui.com/images/samples/maps/world.png",
                windowRect: { left: 0.4, top: 0.2, height: 0.6, width: 0.6 },
                backgroundContent: {
                    type: "openStreet"
                },
                series: [
                    {
                        type: "geographicSymbol",
                        name: "igOffices",
                        dataSource: igOffices,
                        latitudeMemberPath: "Latitude",
                        longitudeMemberPath: "Longitude",
                        showTooltip: true,
                        tooltipTemplate: "customTooltip",
                        markerCollisionAvoidance: "fade",
                        //  Defines marker template rendering function
                        markerTemplate: {
                            measure: function (measureInfo) {
                                measureInfo.width = 10;
                                measureInfo.height = 10;
                            },
                            render: function (renderInfo) {
                                createMarker(renderInfo);
                            }
                        }
                    }
                ]
            });
            $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
        });
        
        function createMarker(renderInfo) {
            var ctx = renderInfo.context;
            var x = renderInfo.xPosition;
            var y = renderInfo.yPosition;
            var size = 10;
            var heightHalf = size / 2.0;
            var widthHalf = size / 2.0;

            if (renderInfo.isHitTestRender) {
...