Implementing GIS map using Webview

Question

I am trying to implement the GIS map in my application using Webview. The problem I am facing is the GIS map is not loading in the mobile application but loading and visible in web and mobile browsers.

I had tried using Android Webview. It is not working. Also instead of Webview, tried Geckoview library. It is working fine but I can't able to print the messages in the console. I want to print the "parcelNumber", "lat", "lon" and "priorityArea" in the console output.

webView!!.settings.apply {
            javaScriptEnabled = true
            setSupportMultipleWindows(true)
            javaScriptCanOpenWindowsAutomatically = true
            allowFileAccess = true
            builtInZoomControls = true
            displayZoomControls = false
            loadWithOverviewMode = true
            domStorageEnabled = true
            useWideViewPort = true
        }
webView!!.webViewClient = object : WebViewClient() {
            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                super.onPageStarted(view, url, favicon)
            }

            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
            }
webView!!.webChromeClient = object : WebChromeClient() {
            override fun onJsAlert(
                view: WebView?,
                url: String?,
                message: String?,
                result: JsResult?
            ): Boolean {
                Log.d("TAG", "onJsAlert:  alert")
                return super.onJsAlert(view, url, message, result)
            }

            override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
webView!!.evaluateJavascript(
                    "document.getElementById('ParcelNumber').value"
                ) { value -> }
webView!!.loadUrl(url + "lat=""&lon=""")