QWebEngineView fails to load GoogleMaps API

allenck

I need to load the GoogleMaps API in a QWebView. Depending upon which of the several methods recommended to load he API, the API fails to load for one reason or another. I have created a small project to recreate the error; The c++ code is essentially the code in the Qt Maps sample Program:

UPDATE! If The test html and js files are served from my local server, it works!

SOLVED! adding the test.htm, apikey.js and test_index.js to a qrc file and then loading the html with ```
page->load(QUrl("qrc:/test.htm"));

// 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();

QFileInfo info(QDir::currentPath() + QDir::separator() + "test.htm");
if(info.exists())
   page->load(QUrl::fromLocalFile(info.filePath()));
   //page->load(QUrl("https://googlemaps.com"));

}



Running the app results in this output:

09:09:06: Debugging /home/allen/Projects/build-maps-Desktop_Qt_6_4_1_GCC_64bit-Debug/maps ...
qt.webenginecontext:

GL Type: desktop
Surface Type: OpenGL
Surface Profile: CompatibilityProfile
Surface Version: 4.3
QSG RHI Backend: OpenGL
Using Supported QSG Backend: yes
Using Software Dynamic GL: no
Using Multithreaded OpenGL: yes

Init Parameters:

application-name maps
browser-subprocess-path /home/allen/Qt/6.4.1/gcc_64/libexec/QtWebEngineProcess
create-default-gl-context
disable-features ConsolidatedMovementXY,InstalledApp,BackgroundFetch,WebOTP,WebPayments,WebUSB,PictureInPicture
disable-setuid-sandbox
disable-speech-api
enable-features NetworkServiceInProcess,TracingServiceInProcess
enable-threaded-compositing
in-process-gpu
use-gl desktop

js: Uncaught (in promise) Error: The Google Maps JavaScript API could not load.

**The html file:**

<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="apikey.js"> </script>
<script>
const process = { env: {} };
process.env.GOOGLE_MAPS_API_KEY =
apikey2;
</script>

<!--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>

**Javascript to load API**

let map; //google.maps.Map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");

console.log("initMap done");

map = new Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});

console.log("initMap done");
}

initMap();
//export {};

I am reasonably sure that my code is in conformance with Google's recommendation for loading the API so I'm wondering whether there is something not supported in QWebEngineView that prevents the API from loading.

TamLe

hi @allenck

Can I ask something? i am also using google maps api v3. However, when I zoom in/out on the map, it is not as smooth as on maps.google.com. I don't know if you encounter this situation?