Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Microsoft Dynamics CRM (Archived)

Custom Bing Maps HTML web resource not showing map

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

Hi experts,

I'm created a web resource to show all child accounts locations on Bing Maps under the parent account record. I got the web resource from here: http://himbap.com/blog/?p=1837

Im not getting any errors but the web resource is blank and not showing the map. 

I have entered the correct API. 

Here is the code:

<html>  
  
    <head>  
        <script src="../../ClientGlobalContext.js.aspx"></script>  
        <script src="../Script/SDK.REST.js" type="text/javascript"></script>  
        <title>Show Child Accounts</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <script src="ecn.dev.virtualearth.net/.../mapcontrol.ashx" type="text/javascript"></script>  
        <script type="text/javascript">  
        var map = null;  
        var messageBox = null;  
        var lat = null;  
        var lon = null;  
        var City = null;  
        var AccountName = null;  
        var pushpin = null;  
        var pushpinCollection = new Microsoft.Maps.EntityCollection();  
        var messageBoxCollection = new Microsoft.Maps.EntityCollection();  
        document.onreadystatechange = function ()  
        {  
            if(document.readyState == "complete")  
            {  
                //initialise map    
                getMap();  
                //Get child account records    
                getChildAccounts();  
            }  
        }  
  
        function getChildAccounts()  
        {  
            //retrieve current entity id    
            var parentaccountId = window.parent.Xrm.Page.data.entity.getId();  
            var entitySchemaName = "Account";  
            //get all child records based on parent customer id    
            var odataQuery = "?$select=Name,Address1_City,Address1_Latitude,Address1_Longitude&" + "$filter=ParentAccountId/Id eq guid'" + parentaccountId + "'";  
            if(typeof (SDK) != "undefined")  
            {  
                //The retrieveAccountsCallBack function is passed through as the successCallBack.    
                SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error)  
                {  
                    alert(error.message);  
                }, function () {});  
            }  
            else  
            {  
                alert("Not able to load REST.SDK library");  
            }  
        }  
        //callback method    
        function getnotesImagesCallback(resultSet)  
        {  
            //initialise message box    
            messageBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),  
            {  
                visible: false  
            });  
            messageBoxCollection.push(messageBox);  
            //Show current account    
            lat = window.parent.Xrm.Page.getAttribute("address1_latitude")  
                .getValue();  
            lon = window.parent.Xrm.Page.getAttribute("address1_longitude")  
                .getValue();  
            City = window.parent.Xrm.Page.getAttribute("address1_city")  
                .getValue();  
            AccountName = window.parent.Xrm.Page.getAttribute("name")  
                .getValue();  
            pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));  
            pushpin.Description = AccountName + ", " + City;  
            //show message box on mouse move    
            Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);  
            //remove message box on mouse lost    
            Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);  
            pushpinCollection.push(pushpin);  
            //add collection to map    
            map.entities.push(pushpinCollection);  
            map.entities.push(messageBoxCollection);  
            if(resultSet.length > 0)  
            {  
                TotalImages = resultSet.length;  
                for(i = 0; i < resultSet.length; i++)  
                {  
                    lat = resultSet[i].Address1_Latitude;  
                    lon = resultSet[i].Address1_Longitude;  
                    City = resultSet[i].Address1_City;  
                    AccountName = resultSet[i].Name;  
                    pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));  
                    pushpin.Description = AccountName + ", " + City;  
                    //show message box on move move    
                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);  
                    //remove message box on mouse lost    
                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);  
                    pushpinCollection.push(pushpin);  
                }  
                //add collection to map    
                map.entities.push(pushpinCollection);  
                map.entities.push(messageBoxCollection);  
            }  
        }  
  
        function displaymessagebox(e)  
        {  
            messageBox.setOptions(  
            {  
                description: e.target.Description,  
                visible: true,  
                offset: new Microsoft.Maps.Point(0, 25)  
            });  
            messageBox.setLocation(e.target.getLocation());  
        }  
  
        function hidemessagebox(e)  
        {  
            messageBox.setOptions(  
            {  
                visible: false  
            });  
        }  
  
        function getMap()  
        {  
            map = new Microsoft.Maps.Map(document.getElementById('bingMaps'),  
            {  
                credentials: 'Aq3qdVGDubWUuklMkomP_2gZqCyzrw_E9vSBD7cOwuGmcvyV2qI2BCIMr_1W8fxP',  
                center: new Microsoft.Maps.Location(41.956690, -103.137798),  
                mapTypeId: Microsoft.Maps.MapTypeId.road,  
                zoom: 10  
            });  
        }  
        </script>  
    </head>  
  
    <body>  
        <div id="bingMaps" style="width: 600px; height: 500px; position: relative;"></div>  
    </body>  
  
</html>  


What do I have to change in the code for it to start working?

Thanks,

Jon

*This post is locked for comments

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Custom Bing Maps HTML web resource not showing map

    I also changed the API key as the one I posted originally was incorrect.

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Custom Bing Maps HTML web resource not showing map

    Hi Pedro,

    Thanks for your reply.

    I tried using your code above but still the map isn't loading. Im not getting any errors but the map area is blank.

    I'm using SDK.REST from Dynamics 365 SDK Version 8.2.1.1.

    Please suggest any other changes I should make to make the code work.

    Thanks,

    Jon

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Custom Bing Maps HTML web resource not showing map

    Hello Jon,
    The Bing SDK version used on this web resource is outdated and some functions were deprecated.
    Try the following:

    <html>
    <head>
        <script src="../../ClientGlobalContext.js.aspx"></script>
        <script src="../Script/SDK.REST.js" type="text/javascript"></script>
        <title>Show Child Accounts</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="www.bing.com/.../mapcontrol" type="text/javascript"></script>
        <script type="text/javascript">
            var map = null;
            var messageBox = null;
            var lat = null;
            var lon = null;
            var City = null;
            var AccountName = null;
            var pushpin = null;
            var pushpinCollection = null;
            var messageBoxCollection = null;
    
            document.onreadystatechange = function() {
                if (document.readyState == "complete") {
                    //initialise map
                    getMap();
                    //Get child account records
                    getChildAccounts();
                }
            }
    
            function getChildAccounts() {
                //retrieve current entity id
                var parentaccountId = window.parent.Xrm.Page.data.entity.getId();
                var entitySchemaName = "Account";
                //get all child records based on parent customer id
                var odataQuery = "?$select=Name,Address1_City,Address1_Latitude,Address1_Longitude&" +
                    "$filter=ParentAccountId/Id eq guid'" + parentaccountId + "'";
    
                if (typeof(SDK) != "undefined") {
                    //The retrieveAccountsCallBack function is passed through as the successCallBack.
                    SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function(error) {
                        alert(error.message);
                    }, function() {});
                } else {
                    alert("Not able to load REST.SDK library");
                }
    
            }
            //callback method
            function getnotesImagesCallback(resultSet) {
    
                //initialise message box
                messageBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {
                    visible: false
                });
                messageBoxCollection.add(messageBox);
    
                //Show current account
                lat = window.parent.Xrm.Page.getAttribute("address1_latitude").getValue();
                lon = window.parent.Xrm.Page.getAttribute("address1_longitude").getValue();
                City = window.parent.Xrm.Page.getAttribute("address1_city").getValue();
                AccountName = window.parent.Xrm.Page.getAttribute("name").getValue();
    
                pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));
                pushpin.Description = AccountName + ", " + City;
                //show message box on mouse move
                Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);
                //remove message box on mouse lost
                Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);
                pushpinCollection.add(pushpin);
    
                //add collection to map
                map.layers.insert(pushpinCollection);
                map.layers.insert(messageBoxCollection);
    
                if (resultSet.length > 0) {
                    TotalImages = resultSet.length;
                    for (i = 0; i < resultSet.length; i++) {
                        lat = resultSet[i].Address1_Latitude;
                        lon = resultSet[i].Address1_Longitude;
                        City = resultSet[i].Address1_City;
                        AccountName = resultSet[i].Name;
    
                        pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));
                        pushpin.Description = AccountName + ", " + City;
    
                        //show message box on move move
                        Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);
                        //remove message box on mouse lost
                        Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);
                        pushpinCollection.add(pushpin);
    
                    }
                    //add collection to map
                    map.layers.insert(pushpinCollection);
                    map.layers.insert(messageBoxCollection);
                }
    
            }
    
            function displaymessagebox(e) {
                messageBox.setOptions({
                    description: e.target.Description,
                    visible: true,
                    offset: new Microsoft.Maps.Point(0, 25)
                });
                messageBox.setLocation(e.target.getLocation());
            }
    
            function hidemessagebox(e) {
                messageBox.setOptions({
                    visible: false
                });
            }
    
            function getMap() {
                map = new Microsoft.Maps.Map(document.getElementById('bingMaps'), {
                    credentials: 'Aq3qdVGDubWUuklMkomP_2gZqCyzrw_E9vSBD7cOwuGmcvyV2qI2BCIMr_1W8fxP',
                    center: new Microsoft.Maps.Location(41.956690, -103.137798),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 10
                });
                pushpinCollection = new Microsoft.Maps.Layer();
                messageBoxCollection = new Microsoft.Maps.Layer();
            }
        </script>
       
    </head>
    
    <body>
        <div id="bingMaps" style="width: 600px; height: 500px; position: relative;"></div>
    </body>  
    </html>


    Cheers!
    Pedro Pisco

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Custom Bing Maps HTML web resource not showing map

    Hi experts

    Any help on this would be very appreciated.

    Thanks in advance.

    Jon

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Custom Bing Maps HTML web resource not showing map

    Hi experts,

    Would anyone know a potential fix for this issue?

    Thanks,

    Jon

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Tip: Become a User Group leader!

Join the ranks of valued community UG leaders

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,494 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,305 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans