Details
-
Bug
-
Resolution: Unresolved
-
Not Evaluated
-
None
-
6.9.1
-
None
-
Windows
Description
I recently purchased a new laptop running Windows 11. When I compiled my app which utilizes QWebEngine to display a Google Maps map. However, I soon found that I could no longer drag Google Maps markers. However, the app works as expected when compiled on a Windows 10 or Ubuntu system.
To verify that the problem was not in my code, I created a minimal app and verified that it failed on Windows 11 but worked on Ubuntu.
Here are the files to create the test app.
main.cpp
// Copyright (C) 2017 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause#include "mainwindow.h" #include <QApplication> int main(int argc, char *argv[]) { QCoreApplication::setOrganizationName("QtExamples"); QApplication app(argc, argv); MainWindow mainWindow; mainWindow.resize(1024, 768); mainWindow.show(); return app.exec(); }
mainwindow.cpp
// Copyright (C) 2017 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #include "mainwindow.h" #include <QMessageBox> #include <QDir> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , m_view(new QWebEngineView(this)) { setCentralWidget(m_view); QWebEnginePage *page = m_view->page(); page->load(QUrl("qrc:/test.htm")); }
mainwindow.h
// Copyright (C) 2017 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QWebEngineView> class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = nullptr); private: QWebEngineView *m_view; }; #endif // MAINWINDOW_H
test.htm
<html> <head> <meta name="viewport" content="initial-scale=1.0" user-scalable="yes" /> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; padding: 0 } #map { height: 100%; } .menu { width: 160px; box-shadow: 3px 3px 5px #888888; border-style: solid; border-width: 1px; border-color: grey; border-radius: 2px; background-color: #ffff; position: fixed; text-align: center; display: none; } .menu-item { height: 20px; background-color: white; } </style> <title>Simple Map</title> <!--script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script--> <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.js?features=default"></script> <!-- playground-hide --> <script src="apikey.js"> </script> <script> const process = { env: {} }; process.env.GOOGLE_MAPS_API_KEY = apikey2; </script> <!-- playground-hide-end --> <!--link rel="stylesheet" type="text/css" href="./style.css" /--> <script type="module" src="test_index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <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: apikey2, v: "weekly"});</script> </body> </html>
apikey.js
var apikey2 = "***************"; //supply your own Google Maps API key here
test_index.js
let map; //google.maps.Map; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); console.log("initMap start"); map = new Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, mapId: '4504f8b37365c3d0', }); map.disableDoubleClickZoom = true; const marker = new AdvancedMarkerElement({ map, position: { lat: -33.85634, lng: 150.98286 }, gmpDraggable: true}); console.log("initMap done"); } initMap(); //export {};
maps.pro
TEMPLATE = app
QT += webenginewidgets widgets
QMAKE_CFLAGS += -std:c++17
QMAKE_CFLAGS += -Zc:__cplusplus
HEADERS += \
mainwindow.h
SOURCES += main.cpp \
mainwindow.cpp
CONFIG+=use_gold_linker \
c++17
#target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/maps
INSTALLS += target!qtConfig(webengine-geolocation) {
error('Qt WebEngine compiled without geolocation support, this example will not work.')
}
RESOURCES += \
maps.qrc