Show child accounts on bing maps under parent

Show child accounts on Bing Maps under
Parent
In this article 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 filled for all account records based on their address.
Requirement: Let’s 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.
Solution: 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:
• Get Bing Maps API
• Need to retrieve all child accounts for current account
• Add pushpins to Bing Maps based on latitude and longitude returned from child accounts
So Let’s follow below steps
• To get Bing Maps key, you can follow instruction here to get it.
• We 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).
• Let’s first upload REST.SDK.js to your solution, we can use retrievemultiple method under this library
to get child records and use below settings (Note: you can get this file under
SampleCodeJSRESTEndpointJavaScriptRESTAssociateDisassociateJavaScriptRESTAssociateDisassociat
eScripts) under your CRM SDK folder, if you don’t have CRM SDK download and extract it first.
Note: We have used him prefix in our publisher it could be new for you if you are not
using specific prefix.
• Create new HTML web resource and use below details.

 Use below code for this html web resource
1. <html>
2.
3. <head>
4. <script src="../../ClientGlobalContext.js.aspx"></script>
5. <script src="../Script/SDK.REST.js" type="text/javascript"></script>
6. <title>Show Child Accounts</title>
7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8. <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type
="text/javascript"></script>
9. <script type="text/javascript">
10. var map = null;
11. var messageBox = null;
12. var lat = null;
13. var lon = null;
14. var City = null;
15. var AccountName = null;
16. var pushpin = null;
17.
18. var pushpinCollection = new Microsoft.Maps.EntityCollection();
19. var messageBoxCollection = new Microsoft.Maps.EntityCollection();
20.
21. document.onreadystatechange = function() {
22. if (document.readyState == "complete") {
23. //initialise map
24. getMap();
25. //Get child account records
26. getChildAccounts();
27. }
28. }
29.
30. function getChildAccounts() {
31. //retrieve current entity id
32. var parentaccountId = window.parent.Xrm.Page.data.entity.getId();
33. var entitySchemaName = "Account";
34. //get all child records based on parent customer id
35. var odataQuery = "?$select=Name,Address1_City,Address1_Latitude,Address1_Lo
ngitude&" +
36. "$filter=ParentAccountId/Id eq guid'" + parentaccountId + "'";
37.
38. if (typeof(SDK) != "undefined") {
39. //The retrieveAccountsCallBack function is passed through as the succes
sCallBack.
40. SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotes
ImagesCallback, function(error) {
41. alert(error.message);
42. }, function() {});

43. } else {
44. alert("Not able to load REST.SDK library");
45. }
46.
47. }
48. //callback method
49. function getnotesImagesCallback(resultSet) {
50.
51. //initialise message box
52. messageBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),
{
53. visible: false
54. });
55. messageBoxCollection.push(messageBox);
56.
57. //Show current account
58. lat = window.parent.Xrm.Page.getAttribute("address1_latitude").getValue();
59. lon = window.parent.Xrm.Page.getAttribute("address1_longitude").getValue();
60. City = window.parent.Xrm.Page.getAttribute("address1_city").getValue();
61. AccountName = window.parent.Xrm.Page.getAttribute("name").getValue();
62.
63. pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon))
;
64. pushpin.Description = AccountName + ", " + City;
65. //show message box on mouse move
66. Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessagebox);
67. //remove message box on mouse lost
68. Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebox);
69. pushpinCollection.push(pushpin);
70.
71. //add collection to map
72. map.entities.push(pushpinCollection);
73. map.entities.push(messageBoxCollection);
74.
75. if (resultSet.length > 0) {
76. TotalImages = resultSet.length;
77. for (i = 0; i < resultSet.length; i++) {
78. lat = resultSet[i].Address1_Latitude;
79. lon = resultSet[i].Address1_Longitude;
80. City = resultSet[i].Address1_City;
81. AccountName = resultSet[i].Name;
82.
83. pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(la
t, lon));
84. pushpin.Description = AccountName + ", " + City;
85.
86. //show message box on move move
87. Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displaymessa
gebox);
88. //remove message box on mouse lost
89. Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', hidemessagebo
x);
90. pushpinCollection.push(pushpin);
91.
92. }
93. //add collection to map
94. map.entities.push(pushpinCollection);
95. map.entities.push(messageBoxCollection);

96. }
97.
98. }
99.
100. function displaymessagebox(e) {
101. messageBox.setOptions({
102. description: e.target.Description,
103. visible: true,
104. offset: new Microsoft.Maps.Point(0, 25)
105. });
106. messageBox.setLocation(e.target.getLocation());
107. }
108.
109. function hidemessagebox(e) {
110. messageBox.setOptions({
111. visible: false
112. });
113. }
114.
115. function getMap() {
116. map = new Microsoft.Maps.Map(document.getElementById('bingMaps'), {
117. credentials: 'Your BingMaps key',
118. center: new Microsoft.Maps.Location(41.956690, -103.137798),
119. mapTypeId: Microsoft.Maps.MapTypeId.road,
120. zoom: 10
121. });
122. }
123. </script>
124. </head>
125.
126. <body>
127. <div id="bingMaps" style="width: 600px; height: 500px; position: relative;">
</div>
128. </body>
129.
130. </html>
 Save and publish your web resource and place this web resource to account form
by navigating Insert ->Web Resource under form editor.
 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.

References: BingMaps SDK
HIMBAP | Need any help in Microsoft Dynamics CRM Contact US !!

Show child accounts on bing maps under parent

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Show child accounts on bing maps under parent