CODEWITHSUNDEEP
javascriptqtgoogle-mapspyqt4pyqt5
bph
bph

Reputation: 11258

Googlemaps API with a QT QWebView

I've been experimenting with the googlemaps javascript API.

My aim is to plot a polyline on a map.

I found the following tutorial -> https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

When I implemented it in a web-browser it worked, however, attempting to do the same within a QT QWebView widget didn't work. The map displayed OK, but the polylines were not plotted.

I'm wondering whether you have to be logged in to your google account in order for your googlemaps API Key to be deemed valid? i.e. it wants to pair an API to a user?

Could that be why the browser works but the QWebView doesn't?

On the python side:

from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *

def __init__(self, parent=None):
    super(g3ui, self).__init__(parent)
    self.setupUi(self)

    self.initMap()

...

def initMap(self):
    self.webView.settings().setAttribute(QWebSettings.JavascriptEnabled, True)

    self.webView.load(QUrl('polyline.html'))

webView created in qt designer, relevant snippet:

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):

...
        self.webView = QtWebKit.QWebView(self.tab_10)
        self.webView.setGeometry(QtCore.QRect(30, 20, 1121, 401))
        self.webView.setUrl(QtCore.QUrl(_fromUtf8("about:blank")))
        self.webView.setObjectName(_fromUtf8("webView"))

On the html side (polyline.html):

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          <!-- zoom: 10, -->
          <!-- center: {lat: 50.8548, lng: 1.1866},       -->
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6Hzn6vaW5MOn-rh9c4kenP8jBpL7rzbQ&callback=initMap">
    </script>
  </body>
</html>

This is the simple polyline tutorial taken from the googlemaps javascript API tutorial site.

Update in response to code in eyllanesc answer:

This is what I see when running the simple main.py code:

simple polyline on a googlemap in QWebView

Upvotes: 1

Views: 2645

Answers (1)

eyllanesc
eyllanesc

Reputation: 243993

Probably your error is caused because you have not passed a valid url, assuming that the .html is in the same folder of the .py I propose the following solution:

.
├── main.py
└── polyline.html

Code:

import sys

from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebView()
    view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))  
    view.show()
    sys.exit(app.exec_())

Output:

enter image description here

Update:

I have rewritten the same code for PyQt5:

WebKit:

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebKit import *
from PyQt5.QtWebKitWidgets import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebView()
    view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))  
    view.show()
    sys.exit(app.exec_())

WebEngine:

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = QWebEngineView()
    view.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
    view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))  
    view.show()
    sys.exit(app.exec_())

In the following link you will find the complete code

Upvotes: 1

Related Questions