HTML file with Google Map Javascript API does not work with QWebEngine

ayataka0612 · 23 Aug 2023, 16:05

Hello. I've prepared an HTML file, that uses Google Map Javascript API, as follows.

<!DOCTYPE html>
<html>

<head>
	<title>Test</title>
</head>

<body>
	<div id="map" class="map"></div>
	<style type="text/css">
		body {
			margin: 0
		}

		#map {
			bottom: 0;
			width: 640px;
			height: 480px;
		}
	</style>
	</div>
	<script>
		function initMap() {
			var map = new google.maps.Map(document.getElementById('map'), {
				center: { lat: -34.397, lng: 150.644 },
				scrollwheel: false,
				zoom: 8,
				disableDefaultUI: true
			});
			map.setTilt(0);
		}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=(MyAPIKEY)&callback=initMap"
		async defer></script>
</body>

</html>

Please note that I replaced "(MyAPIKEY)" with the actual API key that I've created with my Google account.

This file shows Google map when opened with Google Chrome or Microsoft Edge, but does not when opened with QWebEngineView.

I tried using simplebrowser.exe, that I've built from the example code below:

https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-simplebrowser-example.html

I'm using Qt 5.14.2 msvc2017_64 on Windows 11.

I'm wondering maybe I need to set some attributes or settings to QWebEngineView.

Thank you,

Hunglx · wrote on 23 Aug 2023, 16:05

@ayataka0612
Hello, i have the same problème, googleapis have changed from ES8 to ES11, that's why Qt5 can not parse the javascript api anymore.
I try with QWebEngine of Qt 6.5, there is no js bug but i don't have the map neither.

Hunglx · 27 Aug 2023, 08:12

@ayataka0612
It works for me with Qt 6.5 when i initialize the profil parameter for QWebEnginePage

QWebEngineProfile *profil = new QWebEngineProfile("ABC");
    profil->settings()->setAttribute(QWebEngineSettings::PluginsEnabled, true);
    profil->settings()->setAttribute(QWebEngineSettings::DnsPrefetchEnabled, true);
    profil->settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);
    profil->settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessFileUrls, false);

    // Create a QWebEngineView to display the map
    QWebEngineView webEngineView;

    WebPage* webPage = new WebPage(profil, &webEngineView);
    webPage->settings()->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
    webPage->load(QUrl::fromLocalFile("D:/Dev/TestGoogleMap/ressource/googlemap.html"));

ayataka0612 · H Hunglx 24 Aug 2023, 08:14

@Hunglx Hello. Thank you very much for your information. I've understood that I need to switch to Qt 6.5, and set several attributes to QWebEngineProfile. I'll make a try.

Thank you.