{"id":1837,"date":"2015-11-22T18:54:15","date_gmt":"2015-11-22T18:54:15","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=1837"},"modified":"2015-11-30T10:24:42","modified_gmt":"2015-11-30T10:24:42","slug":"show-child-accounts-on-bing-maps-under-parent","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1837","title":{"rendered":"Show child accounts on Bing Maps under Parent"},"content":{"rendered":"

In this post we are going to demonstrate how we can add multiple pushpins in Bing Maps based on the latitude and longitude. First we need to make sure address1_latitude<\/strong> and address1_longitude<\/strong> should be added under account form and should be \u00a0filled for all account records based on their address.<\/p>\n

Requirement<\/strong>: Let\u2019s say we have requirement to show all the child accounts (sub accounts) as pushpins on map under parent account and show their name, city when user will hover on pushpin.<\/p>\n

Solution<\/strong>: We can simply develop an html web resource where we can use Bing Maps AJAX control to show pushpins for child account based on the latitude or longitude values. We can implement this in three steps:
\n\u2022 Get Bing Maps API<\/strong>
\n\u2022 Need to retrieve all child accounts for current account<\/strong>
\n\u2022 Add pushpins to Bing Maps based on latitude and longitude returned from child accounts<\/strong><\/p>\n

So Let\u2019s follow below steps<\/strong><\/p>\n

\u2022 To get Bing Maps key, you can follow instruction here<\/a> to get it.
\n\u2022\u00a0We can create a new solution or can do this customization in base solution, (If you are new to solution, please refer our earlier posts to create solution).
\n\u2022 Let’s first upload REST.SDK.js<\/strong> to your solution, we can use retrievemultiple method under this library to get child records and use below settings (Note<\/strong>: you can get this file under SampleCode\\JS\\RESTEndpoint\\JavaScriptRESTAssociateDisassociate\\JavaScriptRESTAssociateDisassociate\\Scripts<\/em>) under your CRM SDK folder, if you don’t have CRM SDK download and extract it first.<\/p>\n

\"Bingmap1\"<\/a>Note<\/strong>: We have\u00a0used him<\/strong> prefix in our publisher it could be new<\/strong> for you if you are not using\u00a0specific prefix.<\/em>
\n\u2022 Create new HTML web resource and use below details.<\/p>\n

\"Bingmap2\"<\/a><\/p>\n

\u2022 Use below code for this html web resource<\/p>\n

\r\n<html>\r\n\r\n<head>\r\n    <script src="..\/..\/ClientGlobalContext.js.aspx"><\/script>\r\n    <script src="..\/Script\/SDK.REST.js" type="text\/javascript"><\/script>\r\n    <title>Show Child Accounts<\/title>\r\n    <meta http-equiv="Content-Type" content="text\/html; charset=utf-8">\r\n    <script src="http:\/\/ecn.dev.virtualearth.net\/mapcontrol\/mapcontrol.ashx?v=7.0" type="text\/javascript"><\/script>\r\n    <script type="text\/javascript">\r\n        var map = null;\r\n        var messageBox = null;\r\n        var lat = null;\r\n        var lon = null;\r\n        var City = null;\r\n        var AccountName = null;\r\n        var pushpin = null;\r\n\r\n        var pushpinCollection = new Microsoft.Maps.EntityCollection();\r\n        var messageBoxCollection = new Microsoft.Maps.EntityCollection();\r\n\r\n        document.onreadystatechange = function() {\r\n            if (document.readyState == "complete") {\r\n                \/\/initialise map\r\n                getMap();\r\n                \/\/Get child account records\r\n                getChildAccounts();\r\n            }\r\n        }\r\n\r\n        function getChildAccounts() {\r\n            \/\/retrieve current entity id\r\n            var parentaccountId = window.parent.Xrm.Page.data.entity.getId();\r\n            var entitySchemaName = "Account";\r\n            \/\/get all child records based on parent customer id\r\n            var odataQuery = "?$select=Name,Address1_City,Address1_Latitude,Address1_Longitude&" +\r\n                "$filter=ParentAccountId\/Id eq guid'" + parentaccountId + "'";\r\n\r\n            if (typeof(SDK) != "undefined") {\r\n                \/\/The retrieveAccountsCallBack function is passed through as the successCallBack.\r\n                SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function(error) {\r\n                    alert(error.message);\r\n                }, function() {});\r\n            } else {\r\n                alert("Not able to load REST.SDK library");\r\n            }\r\n\r\n        }\r\n        \/\/callback method\r\n        function getnotesImagesCallback(resultSet) {\r\n\r\n            \/\/initialise message box\r\n            messageBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {\r\n                visible: false\r\n            });\r\n            messageBoxCollection.push(messageBox);\r\n\r\n            \/\/Show current account\r\n            lat = window.parent.Xrm.Page.getAttribute("address1_latitude").getValue();\r\n            lon = window.parent.Xrm.Page.getAttribute("address1_longitude").getValue();\r\n            City = window.parent.Xrm.Page.getAttribute("address1_city").getValue();\r\n            AccountName = window.parent.Xrm.Page.getAttribute("name").getValue();\r\n\r\n            pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));\r\n            pushpin.Description = AccountName + ", " + City;\r\n            \/\/show message box on mouse move\r\n            Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);\r\n            \/\/remove message box on mouse lost\r\n            Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);\r\n            pushpinCollection.push(pushpin);\r\n\r\n            \/\/add collection to map\r\n            map.entities.push(pushpinCollection);\r\n            map.entities.push(messageBoxCollection);\r\n\r\n            if (resultSet.length > 0) {\r\n                TotalImages = resultSet.length;\r\n                for (i = 0; i < resultSet.length; i++) {\r\n                    lat = resultSet[i].Address1_Latitude;\r\n                    lon = resultSet[i].Address1_Longitude;\r\n                    City = resultSet[i].Address1_City;\r\n                    AccountName = resultSet[i].Name;\r\n\r\n                    pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon));\r\n                    pushpin.Description = AccountName + ", " + City;\r\n\r\n                    \/\/show message box on move move\r\n                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);\r\n                    \/\/remove message box on mouse lost\r\n                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);\r\n                    pushpinCollection.push(pushpin);\r\n\r\n                }\r\n                \/\/add collection to map\r\n                map.entities.push(pushpinCollection);\r\n                map.entities.push(messageBoxCollection);\r\n            }\r\n\r\n        }\r\n\r\n        function displaymessagebox(e) {\r\n            messageBox.setOptions({\r\n                description: e.target.Description,\r\n                visible: true,\r\n                offset: new Microsoft.Maps.Point(0, 25)\r\n            });\r\n            messageBox.setLocation(e.target.getLocation());\r\n        }\r\n\r\n        function hidemessagebox(e) {\r\n            messageBox.setOptions({\r\n                visible: false\r\n            });\r\n        }\r\n\r\n        function getMap() {\r\n            map = new Microsoft.Maps.Map(document.getElementById('bingMaps'), {\r\n                credentials: 'Your BingMaps key',\r\n                center: new Microsoft.Maps.Location(41.956690, -103.137798),\r\n                mapTypeId: Microsoft.Maps.MapTypeId.road,\r\n                zoom: 10\r\n            });\r\n        }\r\n    <\/script>\r\n<\/head>\r\n\r\n<body>\r\n    <div id="bingMaps" style="width: 600px; height: 500px; position: relative;"><\/div>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
\u2022 Save and publish your web resource and place this web resource to account form by navigating Insert ->Web Resource under form editor.
\n\u2022 Save and publish form and open any account record, if current account will have any child record it will show pushpins for child accounts otherwise it will just show current account record pushpin.<\/p>\n
 <\/p>\n
\"Bingmap3\"<\/a><\/p>\n
Reference: BingMaps SDK<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post we are going to demonstrate how we can add multiple pushpins in Bing Maps based on the latitude and longitude. First we need to make sure address1_latitude and address1_longitude should be added under account form and should be \u00a0filled for all account records based on their address. Requirement: Let\u2019s say we have requirement to show all the… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25,5,6,7,8],"tags":[35,255,253,252,254],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1837"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1837"}],"version-history":[{"count":10,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1837\/revisions"}],"predecessor-version":[{"id":1882,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1837\/revisions\/1882"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}