JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <title>loadmapsyncHTML</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
   
</head>

<body> 
    <div id='myMap' style='width: 100vw; height: 600px;'></div> 
</body>

</html>
 <script type='text/javascript'
        src='https://www.bing.com/api/maps/mapcontrol?branch=experimental&key=Aud2MSquUK1OOygMXHa-woOue_wHKTG9fyUs93uZ0eq5MJoyb_5A112lm4Notun1&callback=initMap'
        async defer></script>

CSS

<style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Segoe UI', Helvetica, Arial, Sans-Serif
        }
    </style>

JavaScript

var arrPoints = new Array();

        var blueIcon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
        var redIcon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        var count = 0;
        var compData = [
            { "seqId": 0, "propertyStreetAddress": "R-1472-U1", "propertyStreetAddress2": null, "long": -121.891602, "lat": 37.271572 },
            { "seqId": 1, "propertyStreetAddress": "R-1472-U2", "propertyStreetAddress2": null, "long": -121.891605, "lat": 37.271577 },
            { "seqId": 2, "propertyStreetAddress": "R-1772-U5", "propertyStreetAddress2": "Mill Rd", "long": -121.886995, "lat": 37.272299 },
            { "seqId": 3, "propertyStreetAddress": "R-1072-U1", "propertyStreetAddress2": null, "long": -121.884115, "lat": 37.274189 },
            { "seqId": 4, "propertyStreetAddress": "R-1202-U6", "propertyStreetAddress2": null, "long": -121.885040, "lat": 37.272822 }];
        
        var map = null;
        var searchManager = null
        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });
            loadMapScenario(map);
        }

        function loadMapScenario(map) {
            var pins = new Microsoft.Maps.EntityCollection();
            for (var i = 0; i < compData.length; i++) {
                var comp = compData[i];
                if (comp.lat != null && comp.lat != undefined
                    && !isNaN(comp.lat) && comp.lat != ''
                    && comp.long != null && comp.long != undefined
                    && !isNaN(comp.long) && comp.long != '') {

                    var valueComp
                    var iconColor
                    var labelColor
                    var property = '';
                    if (comp.propertyStreetAddress != null && comp.propertyStreetAddress != undefined && comp.propertyStreetAddress != '') {
                        property =...