web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Customer experience | Sales, Customer Insights,...
Answered

Trying to integrate Azure Maps into D365 CE

(2) ShareShare
ReportReport
Posted on by 217
Hello,
 
I have a custom table, and custom form.  On this form, I have longitude and Latitude fields.  I need a map on this form that a user can pin and the longitude and latitude fields auto populate from where the pin is placed on the map.
 
Has anyone done this before and if so, how?
I have the same question (0)
  • Sathish Kumar Palanisamy Profile Picture
    388 Super User 2026 Season 1 on at
     
    Hi 
     
    Steps in D365 CE

    1. Add Latitude and Longitude Fields
    • In your custom entity (or standard entity), create two fields:
    • Latitude (Decimal Number)
    • Longitude (Decimal Number)
    2. Add a Web Resource for the Map
    • Create an HTML web resource that uses Azure Maps JavaScript SDK.
    • This web resource will:
    • Display the map.
    • Allow pin placement.
    • Use JavaScript to pass coordinates back to the form.
    3. Sample HTML + JavaScript (Azure Maps Example)
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Azure Maps Pin Drop</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
      <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" />
      <style>
        html, body, #map {
          width: 100%;
          height: 400px;
          margin: 0;
          padding: 0;
        }
      </style>
    </head>
    <body>
      <div id="map"></div>
      <script>
        var map, pin;

        function updateCRMFields(lat, lon) {
          if (parent.Xrm && parent.Xrm.Page) {
            parent.Xrm.Page.getAttribute("new_latitude").setValue(lat);
            parent.Xrm.Page.getAttribute("new_longitude").setValue(lon);
          }
        }
        function initMap() {
          map = new atlas.Map('map', {
            center: [0, 0],
            zoom: 2,
            authOptions: {
              authType: 'subscriptionKey',
              subscriptionKey: 'YOUR_AZURE_MAPS_KEY'
            }
          });

          map.events.add('click', function(e) {
            var position = e.position;
            var coords = map.pixelToPosition(position);

            if (pin) {
              map.markers.remove(pin);
            }

            pin = new atlas.HtmlMarker({
              position: coords,
              text: '📍'
            });

            map.markers.add(pin);
            updateCRMFields(coords.latitude, coords.longitude);
          });
        }

        window.onload = initMap;
      </script>
    </body>
    </html>
     
    Setup Instructions
    1. Replace "YOUR_AZURE_MAPS_KEY" with your actual Azure Maps subscription key.
    2. Replace "new_latitude" and "new_longitude" with your actual field schema names.
    3. Upload this as an HTML Web Resource in D365 CE.
    4. Add it to your form and enable "Pass record context".
    5. Resize the control to fit (e.g., 400px height).
    MS Reference
     
     
     
  • CU31101219-0 Profile Picture
    217 on at
    Thank you for the information. So I copied your script and put in my information.  Now do I add a new section on my form or how do I now get the map to show?
  • Verified answer
    Sathish Kumar Palanisamy Profile Picture
    388 Super User 2026 Season 1 on at
    Hi
     
    To display the map on your form, you’ll need to add the HTML web resource you created into the form layout. 

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

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Stars!

Congratulations to our 2025 Community Spotlights

Thanks to all of our 2025 Community Spotlight stars!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
ManoVerse Profile Picture

ManoVerse 180 Super User 2026 Season 1

#2
11manish Profile Picture

11manish 123

#3
CU11031447-0 Profile Picture

CU11031447-0 100

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans