Performance of QtWebEngine is very poor when zoom in/out with google maps api v3

TamLe · wrote on 24 Apr 2024, 07:28

Hi all
I make a simple app just display Google maps on Qt using WebEngine. So i create a HTML file and use Google Maps Javascript API v3 to display maps.
But the problem is the performance is very poor, lag occur when i drag / drop/ zoom in / zoom out.

I tried changing the WebEngine url to "https://www.google.com/maps/" and the lag doesn't happen anymore. I don't understand where the problem?

Note: I built in release mode at QT 6.4.3

This is my HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="qwebchannel.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="map-container">
        <div id="map"></div>
    </div>
    <script>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
            key: "MyKey",
            v: "3.55",
            language: "ja",
        });
    </script>
    <script src="index.js"></script>
</body>
</html>

This is my QML to display map:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtWebEngine
import QtWebChannel

Window {
    id: google_map_navi
    title: "Google Map Navi"
    width: 1600
    height: 900
    x: Constants.x
    y: Constants.y

    property bool isLoad: false;

    Component.onCompleted:{
        console.debug("[Navi] onCompleted");
    }

    QtObject{
        id: backendId
        WebChannel.id: "backend"

        function receiveFromJS(msg) {
            LogInfo.revcQmlLog(msg);
        }
    }

    WebChannel {
        id: myWebChannel
        registeredObjects: backendId
    }

    WebEngineView {
        id: webview
        anchors.fill: parent
        webChannel: myWebChannel
        url: "html/index.html"

        profile {
            httpCacheType: WebEngineProfile.MemoryHttpCache
            persistentCookiesPolicy: WebEngineProfile.ForcePersistentCookies
            cachePath: "/tmp/webengineexample/customprofile/cache"
            persistentStoragePath: "/tmp/webengineexample/customprofile/data"
            storageName: "customprofile"
        }

        onContextMenuRequested: function(request) {
            request.accepted = true
        }

        settings {
            dnsPrefetchEnabled: true
            errorPageEnabled: true
            javascriptCanOpenWindows: false
            linksIncludedInFocusChain: false
            localContentCanAccessFileUrls: false
            localStorageEnabled: false
            navigateOnDropEnabled: false
            pdfViewerEnabled: false
            printElementBackgrounds: false
        }

        onLoadingChanged:
        {
            if (webview.loadProgress === 100)
            {
                isLoad = true;
            }
        }
    }
}