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.