CODEWITHSUNDEEP
javascriptasp.netajaxbing-maps
Dev006
Dev006

Reputation: 87

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

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);
        }

Upvotes: 0

Views: 2160

Answers (2)

Dev006
Dev006

Reputation: 87

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();
            }
        });

enter image description here

Upvotes: 1

VDWWD
VDWWD

Reputation: 35514

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.

Upvotes: 1

Related Questions