title: Googlemaps API with a QT QWebView
body: <p>I've been experimenting with the googlemaps javascript API.</p>
  
  <p>My aim is to plot a polyline on a map.</p>
  
  <p>I found the following tutorial -> <a href="https://developers.google.com/maps/documentation/javascript/examples/polyline-simple" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/polyline-simple</a></p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Could that be why the browser works but the QWebView doesn't?</p>
  
  <p>On the python side:</p>
  
  <pre><code>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()
  </code></pre>
  
  <p>...</p>
  
  <pre><code>def initMap(self):
      self.webView.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
  
      self.webView.load(QUrl('polyline.html'))
  </code></pre>
  
  <p>webView created in qt designer, relevant snippet:</p>
  
  <pre><code>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"))
  </code></pre>
  
  <p>On the html side (polyline.html):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Simple Polylines&lt;/title&gt;
      &lt;style&gt;
        /* 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;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
  
        // 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,
            &lt;!-- zoom: 10, --&gt;
            &lt;!-- center: {lat: 50.8548, lng: 1.1866},       --&gt;
            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);
        }
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6Hzn6vaW5MOn-rh9c4kenP8jBpL7rzbQ&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the simple polyline tutorial taken from the googlemaps javascript API tutorial site.</p>
  
  <p>Update in response to code in eyllanesc answer:</p>
  
  <p>This is what I see when running the simple main.py code:</p>
  
  <p><a href="https://i.stack.imgur.com/KCYSe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KCYSe.png" alt="simple polyline on a googlemap in QWebView"></a></p>