'Devexpress DX map auto refresh: Stay in the same location

I have put the devexpress map to my application. It refreshes every 20 seconds, and the map moves to a certain location. However, when it refreshes, I want it to stay in the same location. I tried changing the longitude/latitude and auto refresh, but it just goes to different locations, not the one I am at.

The code of the auto refresh:

            var query = {
                iType: eType
            };

            $.ajax({
                type: "POST",
                url: "WebMethods.aspx/GetLiveMapData",
                //headers: { "Accept-Encoding": "gzip" },
                data: JSON.stringify(query),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (result) {
                    if (AppPopup == null) { return; }

                    var map = $("#PopupContainer").dxForm("instance").getEditor("MapField");

                    var markers = [];

                    var sData;
                    var oData;
                    var fisShown = false;

                    sData = eval('(' + result.d + ')');
                    oData = JSON.parse(sData.data);

                    for (var item in oData) {

                        if (oData[item]['SHOWTOOLTIP'] == 1) {
                            fisShown = true;
                        } else {
                            fisShown = false;
                        }

                        markers.push({
                            location: { lat: oData[item]['ML_LATITUDE'], lng: oData[item]['ML_LONGITUDE'] },
                            iconSrc: oData[item]['ICON'], //"Content/Icons/map-marker.png",
                            onClick: function (args) { },
                            tooltip: {
                                isShown: fisShown,
                                text: oData[item]['TOOLTIP']
                            }
                        });
                    }

                    map.beginUpdate();

                    if (e == 0) {
                        map.option("autoAdjust", true);
                        map.option("zoom", 10);
                    } else {
                        map.option("autoAdjust", false);
                        //map.resetOption("autoAdjust");
                    }
                    map.option("markers", markers);

                    map.endUpdate();

                    setTimeout(function () {
                        LiveMapRefresh(1);
                    }, 20000);
                },
                failure: function (msg) {
                },
                error: function (a, b, c) {
                    ODAlertError(c + ' - ' + a.responseText);
                }
            });
        };

        var showCallback = function (e) {
            var iMapHeight = $(window).height();
            iMapHeight = iMapHeight - 160;

            $("#PopupContainer").dxForm({
                labelLocation: "top",
                //height: $(window).height(),
                items: [
                    {
                        itemType: "group",
                        colCount: 1,
                        items: [
                            {
                                itemType: "group",
                                colCount: 2,
                                colSpan: 2,
                                caption: "",
                                items: [
                                ]
                            },
                            {
                                colSpan: 2,
                                template: "<div class='legends-div' id='LegendsDiv'></div>"
                            },
                            {
                                itemType: "group",
                                cssClass: "MapGroup",
                                colCount: 1,
                                colSpan: 2,
                                caption: ODGetMsg(1661),
                                items: [
                                    {
                                        colSpan: 1,
                                        dataField: "MapField",
                                        label: { visible: false, text: ODGetMsg(10434) },
                                        editorType: "dxMap",
                                        editorOptions: {
                                            provider: "google",
                                            type: "roadmap",
                                            controls: true,
                                            zoom: 10,
                                            autoAdjust: false,
                                            width: "100%",
                                            height: iMapHeight,
                                            onReady: function (e) {
                                                setTimeout(function () {
                                                    var map = $("#PopupContainer").dxForm("instance").getEditor("MapField");

                                                    var markers = [];

                                                    markers.push({
                                                        location: { lat: 39.0742, lng: 21.8243 },
                                                        iconSrc: "Content/Icons/map-marker.png",
                                                        onClick: function (args) { },
                                                        tooltip: {
                                                            isShown: false
                                                        }
                                                    });

                                                    map.option("zoom", 5);
                                                    map.option("markers", markers);

                                                    LiveMapRefresh(0);
                                                }, 0);
                                            },
                                            apiKey: {
                                                bing: "",
                                                google: "AIzaSyADwkYePzXKCgV0GoUvEiMgunuzxBBHh3w",
                                                googleStatic: ""
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    }]
            });

            $("#PopupContainer").dxForm("instance").validate();
        }

        OpenPopup(ODGetMsg(4412), oPopupContent, OkCallback, showCallback, null, true, false, validateCallback)
    }```


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source