Cannot read property 'getDomRef' of undefined

Question

I am trying to add a GMap in a dialog on click of a button. When i place the container of the map inside any view, it is rendered properly but when it comes to opening it inside a dialog the problem mentioned in the subject creeps in every time.

I have used the below control in the dialog.

<VBox id="mapDiv" fitContainer="true" justifyContent="Center" alignItems="Center" width="50%" height="10rem"></VBox>

Below is the code I used inside the onclick function

setTimeout(
                function () {
                    var map = new google.maps.Map(sap.ui.getCore().byId('mapDiv').getDomRef(), {
                        center: {
                            lat: -34.397,
                            lng: 150.644
                        },
                        zoom: 20
                    });
                    var infoWindow = new google.maps.InfoWindow;
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function (position) {
                            var pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };

                            infoWindow.setPosition(pos);
                            infoWindow.setContent('Location found.');
                            infoWindow.open(map);
                            map.setCenter(pos);

                        });
                    }
                }, 10000);

Answer 1

The issue got fixed by using Fragment.byId("idValidationFrag", "mapDiv")* instead of sap.ui.getCore().byId("mapDiv").

---

* Fragment required from module "sap/ui/core/Fragment".

Answer 2

Perhaps you need to get the control by relative id if it is defined in the view? I'm not sure how your project is set up.

this.getView().byId('mapDiv').getDomRef()