Application: Microsoft Dynamics 365 Finance and Operation
Version: 10.0.21
Design Sample:

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?