JavaScript runtime error: 'Microsoft' is undefined - Bing Maps version 7

Question

I create Microsoft bing map. JavaScript run time error('Microsoft' is undefined) come up When it is loading.

    function GetMap() {

            var vcredentials = "<%=this.credentialKey%>" //credential Key
            var vlatitude = Number("<%=this.latitude%>") //Latitude
            var vlongitiude = Number("<%=this.longitiude%>") //Longitude
            var vzoomLevel = Number("<%=this.zoom%>");    //Zoom Level  
            var isDataAvailable = "<%=this.isFound%>";  //Is data available 

            // Create the Map instance
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), //div map load
            {
                credentials: vcredentials, //credential
                center: new Microsoft.Maps.Location(vlatitude, vlongitiude),// Latitude and Longitude
                mapTypeId: Microsoft.Maps.MapTypeId.road, //bing map type
                zoom: vzoomLevel, //zoom level
                showBreadcrumb: true, // show Bread crumb
                enableSearchLogo: false,//enable Search Logo
                enableClickableLogo: false,//enable Clickable Logo
                customizeOverlays: true //customize Overlays
            });

            if(isDataAvailable == "True" || isDataAvailable == "true")
                AddPushPin();

            Microsoft.Maps.Events.addHandler(map, 'viewchange', OnViewChanged);
            Microsoft.Maps.Events.addHandler(map, 'click', OnMouseClicked);
        }

Can we see a bit more of your code? Something that contains or defines the Microsoft class — , Oct 04 '18 at 09:09
@VDWWD I used this reference [https://msdn.microsoft.com/en-us/library/ff428643.aspx] — Dev006, Oct 04 '18 at 09:10
@Frost it works when you remove the `]`. Probably a typo from OP — VDWWD, Oct 04 '18 at 09:12
@Frost I used this to call map `oWindow.setUrl("../Administration/GISMapPage.aspx?lat=" + lat + "&lot=" + lot + "&zom=" + zom + "&latCtr=<%=txtLatitude.ClientID%>&lotCtr=<%=txtLongitiude.ClientID%>&zomCtr=<%=hdfZoom.ClientID%>&hnid=" + hid + "&hlatCtr=<%= hdfLatitude.ClientID %>&hlotCtr=<%= hdfLongitiude.ClientID %>");` — Dev006, Oct 04 '18 at 09:23
Thanks for the suggestions.I fixed it. See my answer.. I posted it. — Dev006, Oct 05 '18 at 04:20

score 1 · Answer 1 · answered Oct 04 '18 at 09:23

I don't think you did anything wrong. I created a Bing Maps Key and followed these instructions. This is what it tells you to create:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=YOURMAPKEY' async defer></script>

<div id="myMap"></div>

<style>
    #myMap {
        position: relative;
        width: 600px;
        height: 400px;
    }
</style>

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

However this throws the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.bing.com/fd/ls/lsp.aspx

It seems there is a problem with the Map API. Tested this with Firefox, Chrome and Edge. In Webforms and on a simple html page.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I found what is issue. It was main web page loaded but still map loading. So it was error. I fix it. This is my fix.

 var retryCount = 0;
        function GetMap() {
            try {
                retryCount++;
                var vcredentials = "<%=this.credentialKey%>"
                var vlatitude = Number("<%=this.latitude%>")
                var vlongitiude = Number("<%=this.longitiude%>")
                var vzoomLevel = Number("<%=this.zoom%>");
                var isDataAvailable = "<%=this.isFound%>";
                
                
                // Create the Map instance
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    {
                        credentials: vcredentials,
                        center: new Microsoft.Maps.Location(vlatitude, vlongitiude),
                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                        zoom: vzoomLevel,
                        showBreadcrumb: true,
                        enableSearchLogo: false,
                        enableClickableLogo: false,
                        customizeOverlays: true
                    });

                if(isDataAvailable == "True" || isDataAvailable == "true")
                    AddPushPin();

                Microsoft.Maps.Events.addHandler(map, 'viewchange', OnViewChanged);
                Microsoft.Maps.Events.addHandler(map, 'click', OnMouseClicked);
                }
             catch (Ex) {
                 if (typeof (Microsoft) == 'undefined' || Ex.message == 'Microsoft is not defined')
                       if (retryCount < 5) setTimeout('GetMap()', 5000);
                       else
                          alert('Fail to load Map. Error: ' + Ex.Message);
               
             }
        }
        
        $(document).ready(function () {
            retryCount = 0;

            if (document.readyState === "complete") {
                this.ready = true;

                GetMap();
            }
        });

JavaScript runtime error: 'Microsoft' is undefined - Bing Maps version 7

2 Answers2