- Qt 6.12
- Qt WebEngine
- Qt WebEngine Widgets Examples
- WebEngine Widgets Maps Example
- Qt 6.12.0 Reference Documentation

# WebEngine Widgets Maps Example

Demonstrates how to handle geolocation requests.

Maps demonstrates how to handle geolocation requests originating from a QWebEnginePage.

The Geolocation API is a JavaScript API that web applications can use to determine the user's physical location to show on a map, for example. As Qt WebEngine relies on the Qt Positioning module to power this API, a viable location backend is needed for the target platform.

To avoid accidentally sending location information to third parties geolocation requests are denied by default. This example demonstrates the steps an application must take in order to start accepting these requests.

Note: On Windows 11, enable settings to grant the application access to Windows location services. In the Settings App under Privacy & Security > Location, enable Location services, Let apps access your location and Let desktop apps access your location.

#### Running the Example

You can run the example from:

- Qt Creator

  Open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

- Qt Extension for Visual Studio Code

  Run the Qt: Open Qt examples command from the Command Palette, and select the example from the list. For more information, see Qt Extension for Visual Studio Code: Tutorial: Build and run.

#### The Code

The example program consists of a single class, `MainWindow`, inheriting from QMainWindow:

     #include <QMainWindow>
     #include <QWebEngineView>

     class MainWindow : public QMainWindow
     {
         Q_OBJECT
     public:
         explicit MainWindow(QWidget *parent = nullptr);

     private:
         QWebEngineView *m_view;
     };

In the constructor we first set up the QWebEngineView as the central widget:

     MainWindow::MainWindow(QWidget *parent)
         : QMainWindow(parent)
         , m_view(new QWebEngineView(this))
     {
         setCentralWidget(m_view);

We then proceed to connect a lambda function to the QWebEnginePage::permissionRequested signal:

         QWebEnginePage *page = m_view->page();

         connect(page, &QWebEnginePage::permissionRequested, [this](QWebEnginePermission permission) {

This signal is emitted whenever a web page requests to make use of a certain feature or device, including not only location services but also audio capture devices or mouse locking, for example. In this example we only handle requests for location services:

             if (permission.permissionType() != QWebEnginePermission::PermissionType::Geolocation)
                 return;

Now comes the part where we actually ask the user for permission:

             QMessageBox msgBox(this);
             msgBox.setText(tr("%1 wants to know your location").arg(permission.origin().host()));
             msgBox.setInformativeText(tr("Do you want to send your current location to this website?"));
             msgBox.setStandardButtons(QMessageBox::Yes | QMessageBox::No);
             msgBox.setDefaultButton(QMessageBox::Yes);

             if (msgBox.exec() == QMessageBox::Yes)
                 permission.grant();
             else
                 permission.deny();
         });

Note that the question includes the host component of the web site's URI (`permission.origin()`) to inform the user as to exactly which web site will be receiving their location data.

We use the QWebEnginePermission::grant() and QWebEnginePermission::deny() methods to communicate the user's answer back to the web page.

Finally we ask the QWebEnginePage to load the web page that might want to use location services:

         page->load(QUrl(QStringLiteral("https://bing.com/maps")));
     }

Example project @ code.qt.io

See also Qt WebEngine HTML5 Geolocation.