1

I'm making a python GUI using PyQt6 that I would like to include a google maps widget in. However, I can't get the maps API to display in the QWebEngineView.

I copied some JavaScript code from here:https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/control-disableUI/jsfiddle, and created these files:

map.html:

<html>
  <head>
    <title>Disabling the Default UI</title>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: { lat: -33, lng: 151 },
          disableDefaultUI: true,
        });
      }
      window.initMap = initMap;

    </script>

    <link rel="stylesheet" type="text/css" href="./map.css" />
    <!--script type="module" src="./map.js"></script-->
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=<MY_KEY>&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

map.js:

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;

map.css:

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

When I load map.html in a browser (chromium or firefox), it works as expected, as shown in the jsfiddle page. When I load it using PyQt6 like this:

#map
self.map_view = QWebEngineView()
package_path = get_package_path(package_name)
url = QUrl.fromLocalFile(package_path+"/map.html")
self.map_view.load(url)
layout.addWidget(self.map_view)

When I display the view in a window, it is blank. I have confirmed that simple HTML does work (displaying hello world), so I know that the html file is being loaded.

Does anyone have any ideas about what might cause this/how to fix it? If not, does anyone know of any workarounds I might be able to use?

Thanks!

Edit: I changed some things around, and I think I got further: I'm getting "js: Uncaught (in promise) Error: The Google Maps JavaScript API could not load.". I assume I need to figure out how to load JS libraries in PyQt6.

Matthew Gomes
  • 11
  • 2
  • Welcome to Stack Overflow! Are you using your own API key? – Yrll Jun 12 '23 at 00:44
  • Yes, I have my own API key. The sample code provided by google works, if I run it as standard html in a browser (with my key). It's only in QT that this fails for some reason. – Matthew Gomes Jun 14 '23 at 02:40
  • I tried in my environment. It looks like the javascript and css file works after trying to call `alert()`, but when I tried calling `alert()` inside the `initMap()` callback, it doesn't seem to do anything. So yeah, the issue seems to be with the ``. I tried searching through the net and this could be caused by incompatibility with the API. – Yrll Jun 14 '23 at 04:27
  • ref: https://www.reddit.com/r/learnpython/comments/146f0vx/does_anyone_know_how_to_load_the_google_maps_api/ – Yrll Jun 14 '23 at 04:27

0 Answers0