bing maps will not display on index.cshtml?

Question

I am trying to add Bing maps to my ASP.NET Core MVC website using the standard documentation examples provided by Microsoft on their website

I have included the API key and found out that the map does load in a standard HTML document, but does not load on my index.cshtml view. I have tried various solutions such as including onload="GetMap()" in the body tag, but nothing has worked so far.

<div class="col-md-5">
    <h2>test</h2>
    <div id="myMap" style="position:relative;width:600px;height:600px; background-color: red;"></div>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[My API KEY]' async defer></script>
    <script type='text/javascript'>
        function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap');
            //Add your post map load code here.
        }
    </script>
</div>

There are no error messages, only a blank page

Answer 1

The Bing Maps javascript in sample code is loaded via http - if the hosting website is instead on https, then the request will be blocked due to mixed content. Updating Bing Maps' src to https as well fixes the issue.

Answer 2

 <script type='text/javascript'>
        var map;
    function GetMap() {
         map = new 
          Microsoft.Maps.Map(document.getElementById('myMap'), {});
    }
</script>