Qt Webengine Crash and shows white screen

Renjith R

I am developing a Google map application in Qt that tracks user position and plots markers and connects the markers with polylines. After sometimes the page shows a white screen. I am using Qt 5.12.11 and Windows 10.

Observations:

When the markers were added to the map, the web engine memory keeps increasing.
Crash: When the white screen shows, the web engine is not running.

Here is the sample code.

webViewOnQml.pro

QT += quick webengine

CONFIG += c++11 qml_debug
DEFINES += QT_DEPRECATED_WARNINGS

SOURCES += \
        main.cpp

RESOURCES += qml.qrc

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtWebEngine/QtWebEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);

    QGuiApplication app(argc, argv);
    QtWebEngine::initialize();
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/res/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebEngine 1.0
import QtWebChannel 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Google Map")

    WebEngineView {
        id: view
        anchors.fill: parent
        url: "googleMaps.html"
    }
}

googleMaps.html

    <!-- Make sure to enter a valid Google Key in the Google Script at the bottom of this page -->
    <!-- Visit https://developers.google.com/maps/documentation/javascript/get-api-key -->
    <html>
     <head>
       <style type="text/css">
         html, body { height: 100%; margin: 0; padding: 0; }
         #map { height: 100%; width:100%; margin:0; padding:0; }
       </style>
     </head>
     <body>
        <button onclick="findLocation(-22.834418, 14.862920)">click</button>
       <div id="map"></div>
       <script>
         var markersArray = [];
         setTimeout(() => {
                 let mapUrl = document.createElement("script");
                 let url = "https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=3&callback=initMap"
                 mapUrl.setAttribute("src", url);
                 mapUrl.setAttribute("async","true");
                 mapUrl.setAttribute("defer", "defer");
                 document.body.appendChild(mapUrl);
         }, 50);

         function initMap() {
           myPosition =  new google.maps.LatLng(0,0)
           map = new google.maps.Map(document.getElementById('map'), {
                center:myPosition,
                streetViewControl: false,
                draggable: true,
                scrollwheel: true,
                panControl: true,
                zoom: 17,
                mapTypeId: 'satellite',
                disableDefaultUI: true,
                zoomControl:true,
                mapTypeControl:true,
                rotateControl: true,
                tilt:0
            })
            dotIcon = {  type:'Symbol',
                path: google.maps.SymbolPath.CIRCLE,
                scale: 3,
                fillColor: '#196ffa',
                strokeColor: '#196ffa',
                fillOpacity: 1.0,
                strokeWeight: 0.5,
                zIndex:99,
            }
            latestDotIcon = {  type:'Symbol',
                path: google.maps.SymbolPath.CIRCLE,
                scale: 3,
                fillColor: '#10ff03',
                strokeColor: '#10ff03',
                fillOpacity: 1.0,
                strokeWeight: 2
            }
              addLine();
              currentMarker = new google.maps.Marker({
                    position:new google.maps.LatLng(0,0),
                    icon:latestDotIcon,
                    zIndex:99,
                    map: map
                  });
         }

           function addLine() {
               poly = new google.maps.Polyline({
                   strokeColor: "#000dff",
                   strokeOpacity: 1.0,
                   strokeWeight: 1,
                   zIndex:99,
                 });
                poly.setMap(map);
           }
        function findLocation(latitude,longitude){
            let latLngVal = new google.maps.LatLng(latitude,longitude);
                   marker = new google.maps.Marker({
                      position: latLngVal,
                      icon:dotIcon,
                      map: map
                    });
                    marker.setMap(map);
                    map.setCenter(marker.getPosition());
                    path = poly.getPath();
                    path.push(latLngVal);
                    changeLocation(latitude,longitude);
                    currentMarker.setPosition(latLngVal);
                    delete latLngVal;
                    delete marker;
            }

        function changeLocation(latitude,longitude){
            var lat = latitude+.01
            var lon = longitude+.01
            if(lat>=90) {
                lat=-90
            }
            if(lon>=180) {
                lon=-180
            }
            setTimeout(() => {  findLocation(lat,lon); }, 200);
        }
      </script>
     </body>
    </html>

Note:- Replace your Google maps API key in "<YOUR_API_KEY>" in googleMaps.html to run the code.

Did I miss anything to configure?
How do avoid the crash and memory leak in the Qt Web engine?

nodeepshit

Can you enable QWebengine log and see what's hapening when white screen occurs.