JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=en-GB"></script>
<body> 
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <div>
        <p>Click on 'Get Directions' when the map is visible, and the map is zoomed to the correct bounds. Then toggle the map and click 'Get Directions' again. Toggle the map back to visible. You'll see the map has the incorrect zoom level and bounds.</p>
        <ul>
            <li><a id="btn" href="#">Get Directions</a></li>
            <li><a id="btnToggle" href="#">Toggle Map</a></li>
        </ul>
        
        <div id="results">
            <div id="map" style="width: 500px; height: 500px; position: relative;"></div>
            <div id="steps"></div>
        </div>
            
    </div>
</body>

JavaScript

$('#btn').on('click', function(evt, args) {
    showDirections(); 
});
$('#btnToggle').on('click', function(evt, args) {
    $('#results').toggle();
});
var mapOptions = {
    'credentials': 'AhdeB3IQL6jGT_gsdcTHbNQinoDJB0XeRR4QFbZEYycnORKXcmDe7CAf--bImvhh'
};
var map, directionsManager;
map = new Microsoft.Maps.Map(document.getElementById("map"), mapOptions);
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });

function directionsModuleLoaded() {
    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}

function showDirections() {
    
    // waypoints        
    var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle, WA"});
    var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Portland, OR"});
    
    //
    directionsManager.addWaypoint(startWaypoint);
    directionsManager.addWaypoint(endWaypoint);

    // Set the id of the div to use to display the directions
    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('steps') });

    // add handler
    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);

    // Calculate directions, which displays a route on the map
    directionsManager.calculateDirections();
}
function directionsUpdated(e) {
    /*setTimeout(function () {
        directionsManager.setMapView();
    }, 1000);*/ // shoddy workaround to reset the view
}