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

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Finance | Project Operations, Human Resources, ...
Answered

Google Maps in Microsoft Dynamics 365 Finance and Operation's form

(0) ShareShare
ReportReport
Posted on by 5

Application: Microsoft Dynamics 365 Finance and Operation

Version: 10.0.21

Design Sample:

pastedimage1634851854223v1.png

Current situation: When form is loaded initially, by default record 1 is selected in left Panel and corresponding details are loaded in right Panel including Google maps loaded with marker at mentioned record's lat and long

When Record is changed to Record 2, corresponding details are getting loaded but Google maps remains same and there is no change

Required: Google maps to be loaded with new lat and long values for each record selected in left Panel

Implementation:

Extensible control "Map" added

HTML file and JS resource file created

JS File - 

(function () {
    'use strict';
    $dyn.controls.MyMap = function (data, element) {
        $dyn.ui.Control.apply(this, arguments);
        $dyn.ui.applyDefaults(this, data, $dyn.ui.defaults.MyMap);
        $dyn.ui.observe(this.Latitude, function(_data) { } );
    };
 
    $dyn.controls.MyMap.prototype = $dyn.ui.extendPrototype($dyn.ui.Control.prototype, {
        init: function (data, element) {
            var self = this;
 
            $dyn.ui.Control.prototype.init.apply(this, arguments);
 
            google.load("maps", 3, {
                other_params: "key=*********************************";
                callback: function () {
                    var map = new google.maps.Map(element, {
                            center: { lat: $dyn.value(data.Latitude), lng: $dyn.value(data.Longitude) },
                            zoom: $dyn.value(data.Zoom),
                            mapTypeId: google.maps.MapTypeId.HYBRID
                        });
                    }
            });
        }
    });
})();
X++
Updating Lat and long value in active method of form Datasource. Lat and Long values are being updated but Map is not refreshed.
Question
Could someone please help understanding the query?
I have the same question (0)
  • Verified answer
    André Arnaud de Calavon Profile Picture
    301,075 Super User 2025 Season 2 on at

    Hi Hardik,

    Martin Drab created blogs about extensible controls and took the maps as example. Probably you can find your answer on his blog:

    Extensible control – HTML/JavaScript – Goshoom.NET Dev Blog

    Extensible control – X++ classes – Goshoom.NET Dev Blog

  • Hardik Nuwal Profile Picture
    5 on at

    Thank you for your quick reply.

    I did take reference from Mr. Martin's post and that really helped a lot with basic understanding.

    But it is mentioned in the post "The control also doesn’t accept any input from users, so we didn’t need any binding to datasources nor any commands reacting to user actions, although all these things are possible"

    I am sure these are possible and so I tried using observe method in JavaScript but the execution control is not coming in JS on active record change.

    I need help with understanding, how to bring the control inside JS again and/or reload maps for each record (probably adding some call/code in X++ directly)

  • Suggested answer
    Ludwig Reinhard Profile Picture
    Microsoft Employee on at

    Hello Hardik,

    Have you thought about using a PowerApp for that purpose?

    You can easily design your functionality in the PowerApp and embed it into D365 without coding.

    That might be a feasible and easy workaround?!

    Best regards,

    Ludwig

  • André Arnaud de Calavon Profile Picture
    301,075 Super User 2025 Season 2 on at

    Hi Hardik,

    I have no experience myself how to do this. Microsoft documentation also explains a lot. The next page also explains about data binding. Build extensible controls - Finance & Operations | Dynamics 365 | Microsoft Docs

  • Suggested answer
    Hardik Nuwal Profile Picture
    5 on at

    No worries.

    I was able to resolve the same using "observe" in Javascript. This method also adds marker to the location.

    It looks something like this:-

    $dyn.observe(this.Longitude, function (_data, _element) {

               google.load("maps", 3, {

                   other_params: "key=XXXXXXXXXXXXXXXXXXXXXXX", //Your API key

                   callback: function () {

                       var latLng = { lat: $dyn.value(data.Latitude), lng: $dyn.value(data.Longitude) };

                       var map = new google.maps.Map(element, {

                           center: latLng,

                           zoom: $dyn.value(data.Zoom),

                           mapTypeId: google.maps.MapTypeId.HYBRID

                       });

                       var marker = new google.maps.Marker({ position: latLng, map });

                   }

               });

           });

    Thank you very much for your inputs. It helped me with the pathway to better understanding.

  • André Arnaud de Calavon Profile Picture
    301,075 Super User 2025 Season 2 on at

    Thanks for your update, Hardik. Is your question now answered or do you still have some challenges to solve here?

  • Karimnawaz  Profile Picture
    10 on at

    I have implemented this but Search Location is not available , Can anyone assist.

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

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Leaderboard > Finance | Project Operations, Human Resources, AX, GP, SL

#1
Martin Dráb Profile Picture

Martin Dráb 503 Most Valuable Professional

#2
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 434 Super User 2025 Season 2

#3
BillurSamdancioglu Profile Picture

BillurSamdancioglu 278 Most Valuable Professional

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans